通过设置 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-first）填充：从左到右、从上到下，因此 <ul></ul> 中的 5 个 <li> 会呈现为 1 2 3 / 4 5（取决于列数）。但若需列主序（column-first）效果——即先填满第一列，再填第二列，以此类推（如 1 3 5 / 2 4），关键在于两步协同：
-
启用列流向：
grid-auto-flow: column -
限制纵向空间以触发换列：通过
grid-template-rows显式设定行数（如repeat(2, auto)表示最多 2 行），或配合max-height+grid-auto-rows实现弹性换列。
✅ 正确做法（推荐显式行数控制，语义清晰、行为确定）：
.link-list-grid {
display: grid;
grid-auto-flow: column; /* 关键：列优先填充 */
grid-template-rows: repeat(2, auto); /* 关键：限定最多 2 行 → 自动换列 */
gap: 10px;
}
/* 根据 data-number-columns 动态适配列数（保持响应式） */
.link-list-grid-1 { grid-template-columns: 1fr; }
.link-list-grid-2 { grid-template-columns: repeat(2, 1fr); }
.link-list-grid-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 768px) {
.link-list-grid {
grid-template-columns: 1fr;
grid-template-rows: repeat(1, auto); /* 移动端退化为单列单行流 */
}
}
⚠️ 注意事项：
- 仅设
grid-auto-flow: column不足以实现换列——Grid 默认无限延伸行数，所有子项将挤在同一列中（表现为“竖排一列”）。必须配合grid-template-rows（固定行数）或max-height+grid-auto-rows（高度驱动换列）才能触发列包装。 -
inline-grid（如答案示例）非必需；block级display: grid更符合语义化列表场景，且避免内联布局的宽度计算干扰。 - 若项数不固定且需自适应行数（例如始终填满 3 列、自动计算所需行数），纯 CSS 无法动态推导
repeat(n, auto)中的n；此时建议用 JavaScript 计算Math.ceil(itemCount / columnCount)后注入 CSS 变量，或改用 Flexbox +flex-direction: column+flex-wrap（但对齐控制较弱）。
? 总结：列主序 Grid 的核心公式是display: grid + grid-auto-flow: column + grid-template-rows: repeat(N, auto)
其中 N 即你希望每列显示的最大项数（如 N=2 → 每列最多 2 项，第 3 项自动进入下一列）。该方案兼容所有现代浏览器，无需 JS，语义明确，是实现“垂直优先多列列表”的标准解法。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
