grid-auto-flow属性决定未指定位置的网格项排列方式，默认按行填充，可设为列优先或启用dense填补空隙。
在使用 CSS Grid 布局时，grid-auto-flow 属性用于控制自动放置的网格项（grid items）在网格容器中的排列流向。当你没有显式地通过 grid-row 或 grid-column 指定某个项目的位置时，浏览器会根据 grid-auto-flow 的设置来决定它们如何自动填充网格。
理解 grid-auto-flow 的基本取值
grid-auto-flow 可以接受以下几种值：
- row：默认值。网格项按行优先方式排列，先填满第一行，再进入下一行。
- column：网格项按列优先方式排列，先填满第一列，再进入下一列。
- row dense：在行优先的基础上，启用“稠密”算法，尝试填补前面留空的网格单元。
- column dense：在列优先的基础上，启用稠密算法。
按行排列（row）
这是默认行为。即使不设置 grid-auto-flow: row，系统也会按行填充。
.container {
display: grid;
grid-template-columns: repeat(3, 100px);
grid-auto-rows: 100px;
grid-auto-flow: row;
}
.item1 {}
.item2 {}
/* 没有指定位置的项目会从左到右、从上到下依次排列 */
上面代码中，.item1 会放在 (1,1)，.item2 放在 (1,2)，依此类推。
立即学习“前端免费学习笔记（深入）”；
按列排列（column）
当设置为 column 时，项目会优先向下填充列，而不是向右填充行。
.container {
display: grid;
grid-template-columns: repeat(3, 100px);
grid-auto-rows: 100px;
grid-auto-flow: column;
}
此时，第一个项目在第一列第一行，第二个项目在同一列第二行，直到该列满了才跳到下一列。
使用 dense 启用紧凑排列
当你手动放置某些项目后，可能会在网格中留下空白。使用 dense 可以让自动布局的项目尝试填补这些空隙。
.container {
display: grid;
grid-template-columns: repeat(4, 100px);
grid-auto-rows: 100px;
grid-auto-flow: row dense;
}
.item1 { grid-column: span 2; } /* 占两列 */
.item2 { grid-row: 1; grid-column: 3; } /* 手动放到第3列第1行 */
/* 接下来自动排列的项目可能会填入 .item1 下方的空间 */
注意：dense 可能会导致项目顺序在视觉上错乱，不适合对阅读顺序敏感的内容。
基本上就这些。掌握 grid-auto-flow 能让你更灵活地控制未定位项目的排布逻辑，结合 grid-template-* 和显式定位，可以实现复杂而高效的布局策略。关键是理解“自动”和“流”的关系——你定义结构，它负责填空。
