CSS Grid实现垂直流式布局：列优先自动换行

本文详解如何通过 grid-auto-flow: column 配合显式行数限制，让 Grid 项目按列优先顺序排列并自动换行，从而解决“纵向排序失效”问题。

在默认的 CSS Grid 布局中，项目会按行优先（grid-auto-flow: row）填充，也就是从左到右、从上到下排列。但在需要实现列优先的垂直流式布局时，例如让列表项先按列填满再换到下一列，仅设置 grid-auto-flow: column 并不能达到预期效果。

例如，将 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-auto-flow: column 时的注意事项

• grid-template-rows 必须显式声明，例如 repeat(2, auto)。否则，grid-auto-flow: column 会让单列持续向下延伸，而不会换列。
• 列数由 grid-template-columns 控制，例如 repeat(3, 1fr)；而每列可容纳的最大行数，则由 grid-template-rows 决定。
• 如果项目总数超过 列数 × 行数，多出的内容可能会溢出或被截断。因此应根据预期最大项目数，合理设置 repeat(N, auto) 中的 N。
• 不建议对
  使用 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 列、第 3 列，从而实现稳定的列优先自动换行效果。