通过 grid-auto-flow: column 配合显式行数限制（如 grid-template-rows: repeat(n, auto)），可让 Grid 项按列优先顺序填充，从而实现“1 3 5 / 2 4”这类垂直分栏效果，适用于项数不固定的列表。
通过 `grid-auto-flow: column` 配合显式行数限制（如 `grid-template-rows: repeat(n, auto)`），可让 grid 项按列优先顺序填充，从而实现“1 3 5 / 2 4”这类垂直分栏效果，适用于项数不固定的列表。
在默认的 CSS Grid 布局中，元素按行优先（row-wise）顺序排列：即先填满第一行，再换到下一行。但本例需求是列优先（column-wise）排列——例如 5 个元素在 3 列网格中应呈现为：
1 3 5 2 4
这并非简单的 flex-direction: column 能解决，而需借助 Grid 的 grid-auto-flow 控制自动放置方向。
✅ 正确实现方式
核心在于两步组合：
-
启用列优先自动流：
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) —— 它语义清晰、行为可控，且无需依赖容器高度。
? 示例验证（5 个 <li>）
配合上述 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，但后者兼容性略低。 - 所有子项（
<li>）无需额外设置grid-column/grid-row，Grid 自动流会精确控制顺序。 - 图标（
.icon-angle-right）样式不受影响，保持原有:hover规则即可。
掌握 grid-auto-flow: column 与 grid-template-rows 的协同机制，即可优雅解决动态列表的垂直分栏需求，兼顾语义性、响应性与可维护性。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
