grid-auto-flow用于控制网格项的排列方向和自动布局行为，其取值包括row（默认，按行填充）、column（按列填充）、row dense和column dense（启用稠密算法填补空隙）。当未明确指定项目位置时，浏览器按此属性自动放置项目。例如设置grid-auto-flow: row，项目从左到右逐行排列；设为column则自上而下填满列后再进下一列；启用dense可让后续小项目回填前面留下的空白，提升空间利用率，但可能打乱视觉顺序，影响可访问性。实际应用中，row适合横向布局，column适用于纵向流式内容，如多列文本，而dense需谨慎使用，避免逻辑顺序混乱。结合grid-auto-rows与grid-auto-columns可更好控制隐式轨道尺寸，增强布局灵活性，尤其在处理动态数量子元素时更为有效。
在 CSS Grid 布局中，grid-auto-flow 属性用于控制自动放置的网格项（grid items）在网格容器中的排列方向和顺序。当没有明确指定网格项的位置（比如未使用 grid-row 或 grid-column）时，浏览器会根据 grid-auto-flow 的设置自动将其放入可用的网格单元中。
grid-auto-flow 的基本取值
grid-auto-flow 可以接受一个或两个值，主要分为以下几种：
- row：默认值。网格项按行优先的方式填充，先填满第一行，再进入下一行。
- column：网格项按列优先的方式填充，先填满第一列，再进入下一列。
- row dense：在行优先的基础上，启用“稠密”算法，尝试填补前面留下的空白单元格。
- column dense：在列优先的基础上，启用“稠密”算法。
按行排列（row）
这是默认行为。元素从左到右依次排列，遇到行末就换行。
.container {
display: grid;
grid-template-columns: repeat(3, 100px);
grid-auto-rows: 100px;
grid-auto-flow: row;
}
在这个例子中，前三个项目会排在第一行，第四个开始进入第二行。
立即学习“前端免费学习笔记（深入）”；
按列排列（column）
元素会从上到下填充每一列，填满一列后再移向右侧下一列。
.container {
grid-auto-flow: column;
}
如果只有三行高度空间，第四个项目就会出现在第二列的第一行。
使用 dense 启用紧凑排列
当你手动设置了某些网格项的位置，可能会在布局中留下空隙。使用 dense 可以让后续较小的项目“回填”这些空隙，从而减少空白区域。
.container {
grid-auto-flow: row dense;
}
.item1 {
grid-column: span 2;
}
假设 .item1 占据两列，后面有一个只占一格的项目，在开启 dense 后，这个小项目可能会上移去填补被跳过的那一格，而不是完全跳过整行。
注意：dense 虽然能优化空间利用，但可能导致项目在视觉顺序上与 DOM 顺序不一致，影响可访问性或阅读流。
实际应用建议
- 若希望项目横向排列优先，保持默认
grid-auto-flow: row即可。 - 需要纵向优先布局时（如多列文本流），使用
column更合适。 - 谨慎使用
dense，尤其在内容有逻辑顺序的场景下（如时间线、表单等）。 - 结合
grid-auto-rows和grid-auto-columns可更精确控制隐式轨道大小。
基本上就这些。掌握 grid-auto-flow 能让你更灵活地控制自动布局的行为，特别是在处理动态或未知数量的子元素时非常有用。
