借助 grid-auto-flow: column 配合显式行数限制（例如 grid-template-rows: repeat(n, auto)），可以让 CSS Grid 项目按照列优先顺序自动填充，从而实现“1 3 5 / 2 4”这类纵向分栏布局效果，非常适合项目数量不固定的列表展示场景。
将 grid-auto-flow: column 与显式行数限制结合使用，例如设置 grid-template-rows: repeat(n, auto)，Grid 项就会以“先列后行”的方式依次排布。这样可以轻松实现“1 3 5 / 2 4”这种 CSS Grid 垂直列式布局，尤其适用于列表项数量动态变化的前端页面。
在默认的 CSS Grid 布局规则中，元素通常按行优先（row-wise）顺序排列，也就是先填满第一行，再进入下一行。而这里的目标是实现列优先（column-wise）排列——例如 5 个元素在 3 列网格结构中，希望呈现为：
1 3 5 2 4
这种效果并不能仅靠 flex-direction: column 完成，而是需要借助 CSS Grid 的 grid-auto-flow 属性来控制自动放置方向。
✅ 正确实现方式
实现这一 CSS Grid 自动填充布局，核心在于以下两步：
- 开启列优先自动流：设置
grid-auto-flow: column - 限制行数以触发换列：通过
grid-template-rows显式声明行数（例如repeat(2, auto)表示最多显示 2 行），这样 Grid 会按列依次填充，当前列填满后自动切换到下一列。
⚠️ 需要注意：仅设置 grid-auto-flow: column 并不足以形成多列布局。如果没有限制行高或行数，浏览器会继续创建无限向下延伸的单列，所有元素会纵向堆叠，无法得到预期的垂直分栏效果。
下面是适配现有结构的推荐写法，适合响应式页面和动态数量列表：
.link-list-grid {
display: grid;
gap: 10px;
/* 关键：列优先 + 固定行数 */
grid-auto-flow: column;
/* 根据预期最大显示行数设置，例如 2 行 → 自动形成 3 列（5 项时） */
grid-template-rows: repeat(2, auto); /* 可根据需要改为 3、4 行 */
}
/* 移除原有 grid-template-columns 的硬编码重复，交由 auto-flow 管理 */
.link-list-grid-1,
.link-list-grid-2,
.link-list-grid-3 {
grid-template-columns: none; /* 让列数由内容和行数自动推导 */
}
/* 响应式优化：小屏下恢复为单列（行优先更易读） */
@media (max-width: 768px) {
.link-list-grid {
grid-auto-flow: row; /* 切回行优先 */
grid-template-rows: unset;
}
}? 为什么 grid-auto-flow: column 单独失效？
原因在于，Grid 在 column 模式下默认不会限制行数。它会不断向下创建新行，而不是自动换列。只有在容器高度受到限制（例如使用 max-height），或者通过 grid-template-rows 显式定义了行数时，浏览器才会真正触发按列换行的逻辑。
✅ 更推荐使用 grid-template-rows: repeat(n, auto)，因为这种写法语义明确、控制稳定，同时不需要依赖容器高度，适合大多数 CSS Grid 列优先布局需求。
? 示例验证（5 个
结合上面的 CSS 示例，在 grid-template-rows: repeat(2, auto) 的设置下：
- 第 1 列：Item 1、Item 2
- 第 2 列：Item 3、Item 4
- 第 3 列：Item 5（第 2 行留空）
→ 最终视觉顺序就是1 3 5 / 2 4
? 进阶提示
- 如果希望实现完全动态列数（例如根据列表项数量自动计算更合适的列数），可以配合 JavaScript 动态计算
grid-template-rows的行数；或者采用grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)))+grid-auto-flow: column并结合max-height，不过后者的兼容性相对稍弱。 - 所有子项（
）都不需要额外指定grid-column或grid-row，因为 Grid 自动流机制会负责精确控制排列顺序。 - 图标样式（
.icon-angle-right）不会受到影响，继续保留原有的:hover规则即可。
理解 grid-auto-flow: column 与 grid-template-rows 的配合原理后，就能更高效地实现 CSS Grid 动态列表的垂直分栏布局，同时兼顾语义清晰、响应式适配和后期维护的便利性。
