grid-auto-flow仅控制未显式定位的网格项自动填充顺序，不影响已设grid-row/column的项或grid-template-areas区域；row按行优先、column按列优先扫描空白单元格，dense模式回填空隙但破坏dom与视觉顺序一致性。
grid-auto-flow 看似只是个“填空顺序”开关，但它实际决定了哪些项会被动重排、何时创建隐式轨道、以及视觉流是否与 DOM 顺序脱钩——而这三件事直接决定布局是否可控、可访问、可维护。
grid-auto-flow 只对没写 grid-row 或 grid-column 的项生效
- 显式定位的项（比如
grid-column: 2 / 4）完全不受影响，哪怕你设成column或row dense -
grid-template-areas已定义的区域里，所有子元素都算“显式定位”，grid-auto-flow在这些区域里直接失效 - 常见错误：给容器设了
grid-auto-flow: column，但每个子元素都写了grid-row→ 实际毫无作用 - 如果只有一半子元素写了定位，剩下那些会按
grid-auto-flow规则填进剩余空白单元格，不是整个网格重排
row 和 column 不是“翻转方向”，而是扫描路径不同
-
grid-auto-flow: row（默认）：从左到右扫行，填满一行再下一行 → 视觉上像阅读文字 -
grid-auto-flow: column：从上到下扫列，填满一列再下一列 → 容器高度不变时，新项可能“横向溢出”而非向下延伸 - 关键点：它不改变坐标系，也不强制换行或扩容；是否出现多行/多列，取决于你有没有用
grid-template-columns或grid-auto-columns定义列约束 - 示例：只写
display: grid; grid-auto-flow: column;→ 浏览器默认单行无限宽，所有项挤在第一行，根本不会“竖着排”
dense 模式会破坏 DOM 顺序与视觉顺序的一致性
-
row dense不是“更智能的换行”，而是回填算法：把后面 DOM 中的项往前插进前面留下的空洞 - 后果包括：
- 屏幕阅读器仍按 HTML 源码顺序读，但人眼看到的是插空后的视觉顺序
-
:nth-child(3)可能出现在第1行第2列，而:nth-child(2)却在第3行第1列 - 键盘
Tab顺序和焦点流错位
- 只要存在跨行/跨列项（如
grid-row: span 2），dense就容易让后续项跳到意料之外的位置 - 调试时务必打开浏览器开发者工具的「网格叠加层」，观察隐式轨道和空洞分布
grid-auto-flow 的影响范围非常窄：它不管已有项、不管轨道尺寸、不管是否换行，只管“下一个没被手动放位置的项往哪塞”。真正决定布局形态的，是 grid-template-columns、grid-auto-rows 和显式定位规则的组合。很多人调了半天 grid-auto-flow 却没效果，问题往往出在漏写了列定义，或者误以为它能重排已定位项。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
