Angular甘特图开发：如何让Grid容器内动态div逐行排列？

方法一：自动行配置+索引绑定行位置 #

1. 调整容器CSS：把固定行数定义替换为自动生成行，适配动态元素数量：

.container {
  display: grid;
  margin: 15px 12px 0 0;
  grid-auto-rows: 1fr; /* 自动为每个元素生成等高行 */
  grid-template-columns: [one-January-2023] 0.97fr [two-January-2023] 0.97fr [three-January-2023] 0.97fr [four-January-2023] 0.97fr [five-January-2023] 0.97fr [six-January-2023] 0.97fr [seven-January-2023] 0.97fr [eight-January-2023] 0.97fr [nine-January-2023] 0.97fr [ten-January-2023] 0.97fr [eleven-January-2023] 0.97fr [twelve-January-2023] 0.97fr [thirteen-January-2023] 0.97fr [fourteen-January-2023] 0.97fr [fifteen-January-2023] 0.97fr [sixteen-January-2023] 0.97fr [seventeen-January-2023] 0.97fr [eighteen-January-2023] 0.97fr [nineteen-January-2023] 0.97fr [twenty-January-2023] 0.97fr [twenty-one-January-2023] 0.97fr [twenty-two-January-2023] 0.97fr [twenty-three-January-2023] 0.97fr [twenty-four-January-2023] 0.97fr [twenty-five-January-2023] 0.97fr [twenty-six-January-2023] 0.97fr [twenty-seven-January-2023] 0.97fr [twenty-eight-January-2023] 0.97fr [twenty-nine-January-2023] 0.97fr [thirty-January-2023] 0.97fr [thirty-one-January-2023] 0.97fr
}

2. 修改HTML模板：通过ngFor索引为每个动态元素指定行位置，确保依次排列：

<div class="container">
  <div 
    *ngFor="let task of tasks; let rowIndex = index"
    [style.grid-column-start]="task.startColumn"
    [style.grid-column-end]="task.endColumn"
    [style.grid-row-start]="rowIndex + 1"
  >
    <!-- 任务内容 -->
  </div>
</div>

假设你有tasks数组，每个元素包含startColumn和endColumn（如"four-January-2023"这类列名称）。

方法二：依赖Grid自动流（简洁版） #

如果不需要精确控制行号，Grid默认的grid-auto-flow: row会自动将元素放入下一行，只需保留上述grid-auto-rows: 1fr配置，HTML简化为：

<div class="container">
  <div 
    *ngFor="let task of tasks"
    [style.grid-column-start]="task.startColumn"
    [style.grid-column-end]="task.endColumn"
  >
    <!-- 任务内容 -->
  </div>
</div>

关键说明 #

• 用grid-auto-rows: 1fr替代固定行数定义，让Grid根据元素数量自动生成足够行，避免固定行数的局限性。
• 通过索引绑定行位置，能确保元素严格按顺序排列，不会出现重叠或跳行问题。

内容的提问来源于stack exchange，提问作者Andy88