本文详解如何通过 grid-auto-flow: column 结合显式行数限制，让 Grid 项目按列优先顺序排列并自动换行，解决“纵向排序失效”问题。
本文详解如何通过 `grid-auto-flow: column` 结合显式行数限制，让 grid 项目按列优先顺序排列并自动换行，解决“纵向排序失效”问题。
在默认的 CSS Grid 布局中，项目按行优先（grid-auto-flow: row）填充，即从左到右、从上到下排列。但当需要实现列优先的垂直流式布局（如将列表项按列依次填满，再换列），例如将 1 2 3 4 5 排成：
1 3 5 2 4
仅设置 grid-auto-flow: column 是不够的——此时 Grid 会尝试将所有项目放入单列，除非你明确限制行数或容器高度，否则无法触发列间自动换行。
✅ 正确做法是：
- 启用列优先自动流：
grid-auto-flow: column -
显式定义行数（推荐）：
grid-template-rows: repeat(2, auto)
或 - 限制容器最大高度（需配合
grid-auto-rows，但响应性较差）
以下是可直接落地的解决方案（适配原代码结构）：
.link-list-grid {
display: grid;
grid-auto-flow: column; /* 关键：启用列优先填充 */
gap: 10px;
}
/* 根据 data-number-columns 动态控制列数 → 实际控制的是「最多显示几列」，
而真正决定「每列几行」的是 grid-template-rows */
.link-list-grid-1 {
grid-template-rows: repeat(5, auto); /* 1列时最多5行（容纳5项） */
}
.link-list-grid-2 {
grid-template-rows: repeat(3, auto); /* 2列时每列最多3行 → 支持最多6项 */
}
.link-list-grid-3 {
grid-template-rows: repeat(2, auto); /* 3列时每列最多2行 → 支持最多6项（如示例5项） */
}
/* 移动端回退：单列 + 行优先更自然（可选）*/
@media (max-width: 768px) {
.link-list-grid {
grid-auto-flow: row;
grid-template-columns: 1fr;
}
}
⚠️ 注意事项：
-
grid-template-rows必须显式声明（如repeat(2, auto)），否则grid-auto-flow: column会无限延伸单列，不换列； - 列数由
grid-template-columns控制（如repeat(3, 1fr)），而每列行数上限由grid-template-rows决定； - 若项目总数超出
列数 × 行数，多余项将溢出或被截断——因此建议根据预期最大项数合理设置repeat(N, auto)中的N； - 避免对
<ul></ul>使用display: inline-grid（原答案示例），因它可能破坏语义与盒模型；推荐保持display: grid并确保父容器有足够宽度。
? 进阶提示：若项数动态不确定，可用 JavaScript 计算所需行数（Math.ceil(totalItems / columns)）并动态设置 grid-template-rows，或改用 grid-template-rows: repeat(auto-fit, minmax(1em, 1fr))) 配合 grid-auto-rows 实现弹性行高——但列优先换行仍依赖 grid-auto-flow: column + 显式行约束。
最终效果：无论列表含 5 项还是 20 项，只要列数固定（如 3 列），Grid 将严格按「先填满第1列前2行→再填第2列前2行→再填第3列前2行→然后回到第1列第3行…」的逻辑垂直流式排列，完美满足需求。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
