grid-auto-flow仅控制未显式定位项的填空方向，不创建轨道、不换行、不改变已有项位置；是否换行取决于grid-template-columns等列约束，而非grid-auto-flow本身。
grid-auto-flow 不控制“换行”，也不改变已有项的位置，它只决定那些没写 grid-row 或 grid-column 的项，往哪填空。
为什么设了 grid-auto-flow: row 还是一行排不完就溢出？
因为 grid-auto-flow: row 是默认值，它本身不创建列轨道——是否换行，取决于你有没有定义列约束：
- 只写
display: grid; grid-auto-flow: row;→ 浏览器按单列无限宽处理，所有项横排一行 - 必须配合
grid-template-columns或grid-auto-columns（如repeat(auto-fit, minmax(240px, 1fr))）才能触发“视觉换行” -
grid-auto-rows: 100px影响新行高度，但不决定“要不要生成新行”；新行由列轨道数量变化驱动
grid-auto-flow: column 真实行为：不是“垂直滚动”，而是列优先填空
它不会让容器自动变高，而是按列顺序把项塞进当前列，填满后再跳下一列：
- 若容器设了
grid-template-rows: repeat(3, 100px)，只有 3 行高，则第 4 个项会落在第 1 行第 2 列，而非第 4 行第 1 列 - 显式设置了
grid-row: 2或grid-column: span 3的项完全不受影响，grid-auto-flow只管“没被手动放位置”的项 - 在 RTL 布局中，
column仍从左到右建列，但每列内填充方向仍是上→下
row dense 和 column dense 的代价常被低估
dense 不是“更聪明的换行”，它是回填算法，会破坏 DOM 顺序与视觉顺序的一致性：
立即学习“前端免费学习笔记（深入）”；
- DOM 中第 6 个元素可能被插进第 1 行第 2 列的空隙，而第 2 个元素还在第 3 行——屏幕阅读器和键盘 tab 仍按源码顺序走
-
grid-template-areas已定义区域内的项，dense完全不起作用 - 只要存在跨格项（如
grid-row: span 2），dense就可能让后续项跳到意料之外的位置，调试时建议打开浏览器开发者工具的“网格叠加层”观察隐式轨道
真正需要“流向切换”的场景极少；多数时候你以为要切方向，其实只是漏写了列定义或隐式行高。别迷信 grid-auto-flow 能自动适配，它的作用域非常窄：只管填空，不管扩容、不改坐标系、不重排已定位项。
