默认情况下，CSS Grid 按行优先（row-wise）排列子元素；若需实现“固定两行、自动填充多列”的布局，需配合 grid-auto-flow: column 控制流动方向，并合理设置行轨道。
默认情况下，css grid 按行优先（row-wise）排列子元素；若需实现“固定两行、自动填充多列”的布局，需配合 `grid-auto-flow: column` 控制流动方向，并合理设置行轨道。
在 CSS Grid 布局中，仅声明 grid-template-rows: auto auto 并不能自动将所有子项排布成「2 行 × 多列」的结构——因为 Grid 默认采用 grid-auto-flow: row，即新项目按行顺序填满第一行后换到第二行，依此类推。当容器内有 7 个子元素而只定义了 2 行时，Grid 会自动创建额外行（如第 3、4 行…），导致出现「多行单列」的意外效果。
要达成预期的 2 行、列数自适应（例如：7 个元素 → 第1行4个、第2行3个），关键在于切换自动流动方向为列向，并显式限制行数：
.container {
display: grid;
grid-template-rows: auto auto; /* 明确定义恰好2行 */
grid-auto-flow: column; /* 让子项按列顺序填充：先填满第1列（行1→行2），再填第2列… */
}⚠️ 注意事项：
- grid-auto-flow: column 要求 Grid 容器未显式定义列轨道（如 grid-template-columns）。一旦设置了列轨道，流动行为将受其约束，可能覆盖自动列流效果。
- 若希望每列等宽或控制最大列数，可进一步添加 grid-auto-columns: minmax(100px, 1fr) 或结合 grid-template-columns: repeat(auto-fill, minmax(120px, 1fr))) 配合 grid-auto-flow: row ——但此时需改用「行流 + 列数响应式」策略，而非本例的列流方案。
- 所有子元素将严格按 DOM 顺序依次填入：<div>One</div> → 第1列第1行，<div>Two</div> → 第1列第2行，<div>Three</div> → 第2列第1行……以此类推。
✅ 最终效果：7 个元素被智能分配至 2 行中，形成 4 列（前两列各含2项，后两列各含1项和1项？不——实际是列优先填满：第1列：One/Two，第2列：Three/Four，第3列：Five/Six，第4列：Seven/empty），视觉上呈现紧凑的两行多列网格，且无需手动分组或嵌套。
立即学习“前端免费学习笔记（深入）”；
