grid-auto-flow不控制换行，只决定未定位项的填空顺序：row从左到右、从上到下优先填满行，column从上到下、从左到右优先填满列；换行由grid-template-columns等列轨道定义驱动。
grid-auto-flow 不决定“是否换行”，只决定未定位元素往哪填空；真正控制沿行或列排列的，是它和 grid-template-columns / grid-template-rows 的组合方式。
grid-auto-flow: row 和 column 的实际效果差异
两者不改变坐标系，只改变浏览器扫描空白格子的顺序：
-
grid-auto-flow: row：从左到右、从上到下扫描，优先填满当前行再进下一行 -
grid-auto-flow: column：从上到下、从左到右扫描，优先填满当前列再进下一列
注意：grid-row 或 grid-column 显式设置了位置的元素完全不受影响，只有没手动放位置的项才走这个规则。比如你写了一个 grid-template-columns: repeat(3, 1fr) 但没设 grid-template-rows，那么 row 模式会让新项依次塞进第1行第1列、第1行第2列……直到第1行满，再开第2行；而 column 模式会先填第1列第1行、第1列第2行、第1列第3行……填满一列后才进第2列。
为什么只写 grid-auto-flow: row 却没换行？
这是最常踩的坑：浏览器默认只建一个列轨道，所有项纵向堆成一列——不是没换行，是根本没列可换。要让 row 发挥作用，必须配合列轨道定义：
- 用
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)))让浏览器根据容器宽度自动算出能放几列 - 或写死列数，如
grid-template-columns: 1fr 1fr 1fr - 如果同时写了
grid-template-rows（比如100px 100px），那column模式下第3个元素就会直接跳到第1行第2列，而不是继续往下堆——因为“填满当前列”在只有两行时就结束了
什么时候该加 dense？代价是什么？
row dense 或 column dense 的作用是允许后续项回填前面留下的空隙，但它不是“更智能的换行”，而是布局重排策略：
- 适合卡片高度不一、又想视觉紧凑的仪表盘类布局
- 但会破坏 DOM 顺序与视觉顺序的一致性：DOM 中第5个元素可能被插进第1行第2列的空位，而第2个元素还在第2行
- 屏幕阅读器仍按源码顺序读，键盘
Tab顺序也不变，无障碍场景需额外处理 - 只要存在
grid-row-start: 2或grid-column: span 3这类跨格声明，dense就可能让后续项跳到意料之外的位置
移动端响应式中容易被忽略的前提
auto-fit 能否生效，取决于父容器是否有明确宽度：
- 如果父容器是
display: inline-block或没设width/inline-size，auto-fit无法计算可容纳多少列，结果就是退化为单列 - minmax() 里的最小值（如
minmax(120px, 1fr)）若设得太小，而卡片带 padding 后实际宽度 > 容器可用宽度，Grid 会保守地只保留一列——这不是 bug，是轨道计算的预期行为 - 工具栏等顺序敏感场景，不要用 dense；保持
grid-auto-flow: row（显式写出，防被重置），靠auto-fit+minmax()控制列数即可
真正复杂的地方不在 grid-auto-flow 本身，而在于它和轨道定义、内容尺寸、容器约束之间的隐式耦合——改其中一个，另外两个的行为可能全变。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
