grid-auto-flow 是控制新加入网格项自动分配到未显式指定位置单元格的属性，不是整体网格方向开关，也不影响已设 grid-row/column 的项或 grid-template-areas 定义的布局。
grid-auto-flow 是什么，不是什么
grid-auto-flow 控制的是「新加入的网格项」如何被自动分配到尚未显式指定位置的单元格里，它不决定已有 grid-row/grid-column 的项怎么排，也不影响 grid-template-areas 已定义的区域布局。
常见误解是把它当成“整体网格方向开关”，其实它只管「自动放置（auto-placement）」那一小块逻辑——比如你只写了 display: grid 和 grid-template-columns: repeat(3, 1fr)，但没给子元素设 grid-column，这时候谁先占第1行第1列、谁去第2行第1列……就由 grid-auto-flow 决定。
row 和 column 值的实际行为差异
grid-auto-flow: row（默认值）会让新项优先填满当前行，再换下一行；grid-auto-flow: column 则相反：先填满当前列，再进下一列。注意：这和 flex-direction 不同，它不翻转坐标系，只是改变自动分配时的扫描顺序。
- 如果网格容器有固定行数（比如用
grid-template-rows: 100px 100px），column模式可能让后续项直接跳到第3列第1行，而不是“往下堆” -
grid-auto-flow: row dense或column dense会启用“紧凑填充”：允许回填前面留下的空洞，但可能打乱 DOM 顺序对应的视觉流，对可访问性不利 - 密集模式（
dense）不影响已显式定位的项，只影响自动放置项能否插空
容易被忽略的隐式网格行为
当自动放置超出显式网格范围时，浏览器会创建隐式行或列（通过 grid-auto-rows / grid-auto-columns 定义尺寸），而 grid-auto-flow 决定了这些新增轨道是“横向延展”还是“纵向延展”。
立即学习“前端免费学习笔记（深入）”；
- 例如：
grid-template-columns: 200px 200px+grid-auto-flow: column→ 新项会不断新增列，行高保持由grid-auto-rows控制（默认auto） - 若同时设了
grid-auto-rows: 1fr但没设grid-auto-columns，在column模式下，新增列宽度会是auto（内容撑开），可能造成宽度不一致 - IE 不支持
grid-auto-flow，任何值都会退化为row，且不支持dense
调试时怎么看 grid-auto-flow 是否生效
最直接的方式：删掉所有子元素的 grid-column 和 grid-row，只保留容器的 grid-template-columns（或 grid-template-rows），然后观察子元素自然排列顺序是否符合预期。
- Chrome DevTools 的 Layout 面板里，勾选 “Show line numbers” 后，鼠标悬停网格线能看到隐式轨道被标记为
implicit，这时就能验证是 row 还是 column 模式在起作用 - 如果发现项没按预期方向延伸，先检查有没有其他规则覆盖了
grid-auto-flow（比如某层父容器用了!important） - 用
grid-auto-flow: row dense修复空洞后，务必用屏幕阅读器测试，因为 DOM 顺序和视觉顺序可能错位
grid-column: 1，它就脱离了 grid-auto-flow 的管辖范围；而剩下那些没写定位的，才开始按这个规则排队——这种混合模式最容易出视觉断层。 
