grid-auto-flow 控制未显式定位的网格项自动填充方向，默认 row（逐行）、column（逐列）或加 dense 启用回填；它仅作用于隐式网格，需配合 grid-auto-rows/columns 设置隐式轨道尺寸，否则易导致错位。
grid-auto-flow 是什么，它怎么决定内容排列方向
grid-auto-flow 控制的是「未显式指定位置的网格项」如何自动填入空闲网格单元。它不改变已用 grid-row / grid-column 定位的元素，只影响那些“放任不管”的子项。
默认值是 row：从左到右、从上到下依次填充，填满一行再换行；设为 column 则变成从上到下、从左到右，先填满一列再进下一列；加 dense（如 row dense）会启用回填机制——跳过空洞、把小项目塞进前面留下的缝隙里。
注意：dense 可能打乱 DOM 顺序的视觉流，对可访问性或语义化有影响，别盲目开启。
多行多列容器中，grid-auto-flow 和 grid-template-rows/columns 的关系
grid-template-rows 和 grid-template-columns 定义的是「明确轨道数」，而 grid-auto-flow 管的是「超出这些轨道后怎么安排」。
立即学习“前端免费学习笔记（深入）”；
- 如果只写了
grid-template-columns: repeat(3, 1fr)，没写grid-template-rows，那行数由内容撑开，grid-auto-flow: row（默认）会让新行自动创建 - 如果同时设了
grid-template-rows: 200px 200px（仅两行），但子项超过 6 个（3列×2行），多余项就会按grid-auto-flow规则放进隐式行或列中——此时隐式行高由grid-auto-rows决定 -
grid-auto-rows和grid-auto-columns必须显式设置，否则隐式轨道高度/宽度为auto，可能造成高度塌陷或不可预期的包裹行为
自动布局时内容错位、换行异常的常见原因
多行多列下内容“跳着走”或“挤成一团”，往往不是 grid-auto-flow 本身的问题，而是和以下配置联动出错：
-
grid-column-start/end或span值导致某项占位过大，人为制造空洞，而你又开了dense，结果其他项插进来打乱节奏 - 父容器没设
width或max-width，在响应式场景下，列数计算失准，repeat(auto-fill, minmax(200px, 1fr)))这类写法失效，间接让grid-auto-flow没东西可排 - 子项设置了
align-self或justify-self，但父容器的align-items/justify-items与之冲突，视觉上像“偏移”，实则是对齐行为覆盖了自动定位 - 使用
grid-auto-flow: column时，忘了配grid-auto-rows: minmax(100px, auto)，导致每列高度不一致，后续列被顶得歪斜
一个可控的多行多列自动布局最小实例.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)));
grid-auto-rows: 120px; /* 隐式行高固定，避免高度坍缩 */
grid-auto-flow: row; /* 默认可省略，但显式写出更清晰 */
gap: 12px;
}
这个写法能在容器变窄时自动减少列数，变宽时增加列数，所有子项按 DOM 顺序逐行填满。不需要 JS 计算列数，也不用给每个子项写 grid-column。
真正容易被忽略的是：grid-auto-rows 和 grid-auto-columns 的缺失，会让自动创建的轨道失去尺寸基准——看起来“布局失败”，其实是隐式轨道没高度/宽度，浏览器按 auto 渲染导致内容重叠或错位。
