使用grid-auto-flow: column时如何实现动态行？

你的问题根源在于：你固定了grid-template-rows: repeat(3, 1fr)，同时设置grid-auto-flow: column，当元素数量超过3×3=9个时，Grid会按照column的方向自动生成新列，而非新行。

下面提供两种符合你需求的解决方案：

方法1：用CSS Columns布局（推荐，更简洁） #

这是实现竖排多列布局最直接的方式，完美匹配你想要的元素排列效果：

ul {
  columns: 3; /* 固定显示3列 */
  column-gap: 1rem; /* 列之间的间距 */
  max-width: 888px;
  margin: 0 auto;
  list-style: none;
  padding: 0;
}
li {
  break-inside: avoid; /* 防止单个列表项被拆分到两列 */
  margin-bottom: 1rem; /* 可选：调整列表项之间的垂直间距 */
}

这种方式下，元素会自动按列从上到下排列，列数始终保持3列，元素增多时只会纵向扩展行数，不会新增列。

方法2：纯CSS Grid实现 #

如果你坚持使用Grid，可以通过调整轨道设置来实现：

ul {
  display: grid;
  grid-auto-flow: column; /* 保持列优先的填充顺序 */
  grid-template-columns: repeat(3, 1fr); /* 固定3列 */
  grid-auto-rows: 1fr; /* 自动生成的行高度设为1fr */
  max-width: 888px;
  margin: 0 auto;
  list-style: none;
  padding: 0;
  min-height: 300px; /* 给容器设置最小高度，引导Grid生成足够的行来填充列 */
}

注意：如果不设置容器的最小高度，Grid会默认把所有元素先塞进第一列，再依次填充第二、第三列，无法自动平均分配元素到3列。如果需要元素平均分布，还是方法1更合适。

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