grid-auto-flow属性用于控制网格项的自动排列方式，其默认值为row，表示按行优先排列；设置为column时按列优先排列；添加dense关键字可启用紧密填充模式，尝试填补前面空缺，提升空间利用率。
在CSS Grid布局中，grid-auto-flow 属性用于控制网格容器中自动放置的网格项（grid items）的排列方式。当你定义了部分明确的网格位置，而其余项目需要由浏览器自动布局时，这个属性就起作用。
理解 grid-auto-flow 的基本作用
当使用 grid-template-rows 和 grid-template-columns 定义了固定轨道后，未被明确定位的元素会由网格的“自动放置”机制处理。grid-auto-flow 决定这些元素是按行排列还是按列排列，以及是否允许“跳跃”填充空隙。
可用的值及其效果
grid-auto-flow 可以接受以下关键字值：
- row：默认值。元素优先填满每一行，从左到右，行满后换下一行。
- column：元素优先填满每一列，从上到下，列满后换下一列。
- row dense：除了按行排列外，启用“紧密”模式，尝试填补前面留下的空白区域。
- column dense：类似 row dense，但按列优先，并尽量填补空缺。
实际示例说明
假设你有一个 3×3 的网格容器，其中部分项目设置了明确的位置，其他项目由系统自动排列：
立即学习“前端免费学习笔记（深入）”；
.container {
display: grid;
grid-template-columns: repeat(3, 100px);
grid-template-rows: repeat(3, 100px);
grid-auto-flow: row; /* 或 column / row dense */
}
<p>.item1 { grid-column: 1; grid-row: 1; }
.item2 { grid-column: 3; grid-row: 1; } /<em> 第二个元素跳过了第2列 </em>/
/<em> 接下来的项目将根据 grid-auto-flow 填充 </em>/
.item3 { } /<em> 自动放置 </em>/</p>如果设置为 grid-auto-flow: row，.item3 会放在第1行第2列（即使没有被占），继续按行顺序排列。
如果改为 grid-auto-flow: row dense，系统会主动查找前面可以填充的空位（比如第1行第2列），让布局更紧凑，避免留下不必要的空白。
何时使用 dense 模式？
使用 dense 能提升空间利用率，但要注意可能打乱DOM顺序带来的可访问性问题。适合用于卡片、图块等视觉优先、顺序不敏感的布局。
基本上就这些。掌握 grid-auto-flow 能让你更灵活地控制自动布局行为，尤其在响应式设计中非常实用。
