grid-auto-flow 控制网格自动布局方向，支持 row、column 及 dense 模式；默认按行排列，可切换为列优先或启用紧密填充以优化空间利用，结合响应式设计提升布局灵活性。
CSS 的 grid-auto-flow 属性是控制网格中自动放置元素顺序的关键工具。当你在定义的显式网格轨道之外添加元素时，浏览器会根据 grid-auto-flow 的设置来决定这些元素如何排列。合理使用它，可以显著优化布局结构和内容可读性。
理解 grid-auto-flow 的基本值
grid-auto-flow 支持以下几个主要值：
- row：默认行为，元素优先填满每一行，从左到右，再换行向下。
- column：元素优先按列填充，从上到下，再向右移动到下一列。
- row dense 或 column dense：启用“紧密”模式，尝试填补前面留下的空隙（适用于有跨度的项目）。
例如，你有一个 3 列的网格容器，但某些项目设置了 grid-column: span 2，这可能会在布局中留下空白。使用 dense 可以让后续较小的项目“上移”填充这些空位，从而减少空白区域。
按内容逻辑调整填充方向
如果你的内容本质上是垂直组织的，比如时间轴或侧边栏菜单项，使用 grid-auto-flow: column 更自然。这样元素会先填满第一列，再进入第二列，适合纵向阅读流。
立即学习“前端免费学习笔记（深入）”；
.container {
display: grid;
grid-template-rows: repeat(3, 1fr);
grid-auto-flow: column;
}
上面的代码会让元素优先纵向排列，每列最多 3 行，适合固定行数、动态列数的场景。
利用 dense 模式提升空间利用率
当网格中存在不同大小的项目时，普通 row 模式可能导致布局出现明显空白。加入 dense 能让系统更智能地重排小项目，填补空缺。
.grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-flow: row dense;
}
.item-wide { grid-column: span 2; }
此时，如果某个宽项目跳过一个位置，后面的小项目有机会被提前安排进去，避免视觉上的断裂感。注意：dense 可能打乱 DOM 顺序，影响可访问性或屏幕阅读器体验，需谨慎使用。
结合 auto-placement 实现响应式流式布局
配合媒体查询与 grid-auto-flow，可以在不同屏幕尺寸下切换填充策略。例如移动端用列优先，桌面端用行优先：
@media (max-width: 768px) {
.layout { grid-auto-flow: column; }
}
@media (min-width: 769px) {
.layout { grid-auto-flow: row; }
}
这种做法特别适合卡片式布局或仪表盘组件，在有限宽度下保持垂直滚动的合理性。
基本上就这些。掌握 grid-auto-flow 的行为，能让你更灵活地控制网格中未知数量或动态插入的元素排列方式，提升整体布局效率和视觉连贯性。不复杂但容易忽略。
