grid-auto-flow用于控制未明确放置的网格项排列方式，默认按行填充，可选列或紧密模式以优化空间利用。
在 CSS Grid 布局中，grid-auto-flow 属性用于控制自动放置的网格项（grid items）在网格容器中的排列方向和顺序。当你没有明确指定某些网格项的位置时，浏览器会根据 grid-auto-flow 的设置来自动安排它们。
理解 grid-auto-flow 的基本作用
当使用 grid-template-rows 和 grid-template-columns 定义了网格结构，但部分子元素未通过 grid-row 或 grid-column 明确放置时，这些“自动放置”的项目就会按照 grid-auto-flow 的规则填充空白区域。
grid-auto-flow 的可选值
该属性支持以下几种取值方式：
- row：默认值。网格项优先填满每一行，必要时创建新行。
- column：网格项优先填满每一列，必要时创建新列。
- row dense：除了按行排列外，启用“紧密”模式，尝试填补前面留下的空隙。
- column dense：按列排列的同时启用紧密填充。
实际使用示例
假设你有一个 3x3 的网格容器，但只给其中两个项目设置了具体位置，其余由系统自动布局：
立即学习“前端免费学习笔记（深入）”；
.container {display: grid;
grid-template-columns: repeat(3, 100px);
grid-template-rows: repeat(3, 100px);
grid-auto-flow: row;
}
.item1 { grid-column: 1; grid-row: 1; }
.item2 { grid-column: 3; grid-row: 1; }
/ 其他项目未指定位置 /
此时，剩余的项目会从左到右、从上到下依次填入第1行剩下的第2列，然后是第2行各列。
如果改为 grid-auto-flow: column，则项目会优先向下填充每一列，比如先填第1列的第2行、第3行，再进入第2列。
加上 dense 关键字后，系统会尝试优化空间利用。例如，某个大项目跳过一个格子导致出现空洞，后续的小项目可能会被提前插入这个空位，从而减少空白——但要注意这可能打乱视觉上的 DOM 顺序。
何时使用 dense 模式？
适合项目尺寸不一且希望最大化利用空间的场景，如仪表盘或图块布局。但要小心使用，因为它可能导致逻辑顺序与视觉顺序不一致，影响可访问性。
基本上就这些。掌握 grid-auto-flow 能让你更灵活地控制自动布局的行为，尤其是在处理动态内容或响应式设计时非常有用。
