grid-auto-flow 控制网格中未定位元素的排列方式，默认按行填充，可设为 column 或 dense 模式实现纵向或紧凑布局，配合隐式轨道定义实现灵活自适应效果。
在使用 CSS Grid 布局时，grid-auto-flow 是控制自动布局填充的关键属性。它决定了网格容器中未明确指定位置的子元素如何自动排列。通过合理设置该属性，可以实现灵活、自适应的布局效果。
理解 grid-auto-flow 的作用
当使用 grid-column 或 grid-row 显式放置部分元素后，剩下的元素需要由浏览器自动安排位置。这时 grid-auto-flow 就起作用了。它有以下几个常用值：
- row：默认值，按行填充，先填满第一行，再进入下一行
- column：按列填充，先填满第一列，再进入下一列
- row dense：在按行填充的同时，尽可能填补前面留空的网格区域
- column dense：在按列填充的同时，尝试填补空缺
按行自动填充（默认行为）
这是最常见的布局方式，适合大多数从左到右、从上到下的内容流。
.container {
display: grid;
grid-template-columns: repeat(3, 100px);
grid-auto-rows: 100px;
grid-auto-flow: row;
}
.item1 { grid-column: span 2; }
/* 其他项目会依次向右填充，换行 */
上面例子中，.item1 占据两列，后续元素会从剩余空间开始排列，直到行满后换行。
立即学习“前端免费学习笔记（深入）”；
按列自动填充（纵向优先）
当你希望内容优先向下填充时，比如制作多列新闻流或垂直时间轴，可以使用 column 模式。
.container {
display: grid;
grid-template-rows: repeat(3, 100px);
grid-auto-columns: 100px;
grid-auto-flow: column;
}
.item1 { grid-row: span 2; }
/* 后续元素会在当前列填不满时继续向下，再换列 */
使用 dense 避免空白（紧凑排列）
当某些项目占据多个网格区域时，可能会留下无法被后续项目填充的空隙。dense 可以让浏览器尝试将小项目“回填”到这些空隙中。
- 适合卡片布局、瀑布流等对空间利用率要求高的场景
- 注意：dense 可能改变项目的视觉顺序，影响可访问性
.container {
display: grid;
grid-template-columns: repeat(4, 100px);
grid-auto-rows: 50px;
grid-auto-flow: row dense;
}
.item2 { grid-column: span 2; grid-row: span 2; }
/* 浏览器会尝试把后面的短项目塞进 item2 留下的顶部右侧空位 */
基本上就这些。掌握 grid-auto-flow 能让你更自由地控制自动布局的行为，无论是横向排布、纵向堆叠还是紧凑填充，都能轻松实现。关键是结合 grid-auto-rows 或 grid-auto-columns 定义隐式轨道，再选择合适的流动方向和填充策略。
