CSS Grid无法实现期望列分布，窗口缩放时列错位

你的问题出在使用了auto-fill作为列重复规则——它会根据容器宽度自动增减列数，导致窗口缩放时不同行的列数不一致，进而引发对齐错乱和列换行。要实现所有列始终垂直对齐且不换行，需要确保所有行的列数完全匹配动态数据的长度，同时禁止网格自动换行。

修改方案 #

方法一：使用CSS变量绑定动态列数（推荐）

通过CSS变量动态设置每行的列数，确保所有行的列结构完全一致：

.sequenz-container {
  display: grid;
  grid-template-rows: repeat(auto-fit, minmax(100px, 1fr));
  gap: 2px;
}

.sequenz-row {
  display: grid;
  /* 用CSS变量控制动态列数，固定列结构 */
  grid-template-columns: minmax(140px, 1fr) repeat(var(--column-count), minmax(100px, 1fr));
  gap: 2px;
  /* 禁止列自动换行 */
  grid-auto-flow: column;
  /* 宽度不足时显示横向滚动条 */
  overflow-x: auto;
}

.sequenz-column, .title-column {
  height: 100px;
  background-color: #e0e0e0;
}

在Angular模板中绑定CSS变量，传入priceSteps的长度：

<div class="steps-chart-container">
  <div class="sequenz-container">
    <div class="sequenz-row" 
         *ngFor="let row of [1, 2, 3]"
         [style.--column-count]="priceSteps.length">
      <div class="title-column"></div>
      <div class="sequenz-column" *ngFor="let priceStep of priceSteps">
      </div>
    </div>
  </div>
</div>

方法二：动态生成网格列模板字符串

如果需要兼容不支持CSS变量的旧环境，可以在组件类中动态生成grid-template-columns的取值：

// 组件类中添加计算属性
get columnTemplate(): string {
  return `minmax(140px, 1fr) repeat(${this.priceSteps.length}, minmax(100px, 1fr))`;
}

模板中直接绑定该属性：

<div class="steps-chart-container">
  <div class="sequenz-container">
    <div class="sequenz-row" 
         *ngFor="let row of [1, 2, 3]"
         [style.grid-template-columns]="columnTemplate">
      <div class="title-column"></div>
      <div class="sequenz-column" *ngFor="let priceStep of priceSteps">
      </div>
    </div>
  </div>
</div>

核心原理 #

• 移除auto-fill，改用固定的列重复次数，确保所有行的列数与priceSteps的长度完全一致，从根源上保证垂直对齐。
• grid-auto-flow: column强制网格元素始终按列排列，不会自动换行到下一行。
• overflow-x: auto在容器宽度不足时提供横向滚动能力，避免列被挤压变形或换行。

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