grid-auto-flow属性控制CSS网格中子元素的自动排列顺序，其值包括row（默认，按行填充）、column（按列填充）、row dense和column dense（启用稠密算法填补空隙）；当设置为row时，5个子元素先填满第一行三个格子，剩余两个进入第二行；设为column时，元素优先纵向填满每列，依次在列内从上到下排列；dense模式可使后续项目填补手动定位产生的空隙，但可能打乱视觉顺序，影响可访问性；该属性在响应式与动态布局中尤为实用。
在 CSS Grid 布局中，子元素的排列顺序不仅由它们在 HTML 中的顺序决定，还可以通过 grid-auto-flow 属性进行控制。这个属性决定了网格容器如何自动放置没有明确指定位置的子元素（即未使用 grid-column 或 grid-row 定位的项目）。
grid-auto-flow 的取值
grid-auto-flow 可以接受以下几种值：
- row：默认值，子元素按行优先顺序排列，填满当前行后再换到下一行。
- column：按列优先顺序排列，填满当前列后再移动到下一列。
- row dense：启用“稠密”算法，在行方向上尽可能填满空隙。
- column dense：启用“稠密”算法，在列方向上尽可能填满空隙。
按行排列（默认行为）
当设置为 grid-auto-flow: row 时，子元素从左到右、从上到下依次填充网格行。
.container {
display: grid;
grid-template-columns: repeat(3, 100px);
grid-auto-flow: row;
}
假设你有 5 个子元素，它们会先填第一行的三个格子，剩下的两个进入第二行。
立即学习“前端免费学习笔记（深入）”；
按列排列
将 grid-auto-flow 设置为 column 后，元素会优先纵向填充每一列。
.container {
display: grid;
grid-template-rows: repeat(3, 100px);
grid-auto-flow: column;
}
此时，第一个元素放在第一列第一行，第二个元素放在第一列第二行，第三个在第一列第三行，第四元素才进入第二列第一行，依此类推。
dense 模式的作用
当某些子元素被手动定位导致出现空隙时，dense 策略会让后续较小的项目尝试填补这些空隙，可能打乱视觉顺序。
.container {
grid-auto-flow: row dense;
}
注意：使用 dense 可能影响可访问性或语义结构，因为视觉顺序和 DOM 顺序不一致。
基本上就这些。合理使用 grid-auto-flow 能让你更灵活地控制网格中项目的流向，特别是在响应式布局或动态内容场景中特别有用。
