grid-auto-flow 不切换流向，只决定未定位项的填空顺序；row 从左到右、从上到下扫描，column 从上到下、从左到右扫描；换行由列轨道定义驱动，非 auto-flow 本身控制。
grid-auto-flow 不能“切换”流向，它只决定新加入的未定位项往哪填空；所谓“切换”，本质是改写 CSS 规则并触发重排，不是运行时动态翻转已有布局。
grid-auto-flow: row 和 column 的实际行为差异
两者不改变坐标系，只改变浏览器扫描空白单元格的顺序：
-
grid-auto-flow: row：从左到右、从上到下扫描，优先填满当前行再进下一行 -
grid-auto-flow: column：从上到下、从左到右扫描，优先填满当前列再进下一列 - 注意：如果容器已用
grid-template-rows固定了行数（比如100px 100px），column模式会让第3个项直接跳到第1行第2列，而不是堆在第3行——因为“填满当前列”在只有两行时就结束了 - 显式设置了
grid-row或grid-column的项完全不受影响，grid-auto-flow只管那些没被手动放位置的项
为什么 grid-auto-flow: row 不等于“自动换行”
这是最常踩的坑：grid-auto-flow: row 是默认值，但它本身不创建新行；是否换行，取决于列轨道是否存在约束：
- 只写
display: grid; grid-auto-flow: row;→ 浏览器按单列无限宽处理，所有项横排一行，溢出也不折 - 真正触发换行，得靠
grid-template-columns或grid-auto-columns定义列宽，例如：grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) -
grid-auto-rows: 1fr或grid-auto-rows: 100px会影响新行高度，但不决定“要不要换行”——换行由列轨道数量变化驱动 - 移动端上
minmax(120px, 1fr)看似合理，但如果卡片带 padding 后实际宽度 > 容器可用宽度，auto-fit会退化为单列，视觉上像“没换行”，这是 Grid 轨道计算的预期行为，不是 bug
row dense 和 column dense 的真实代价
dense 不是“更智能的换行”，而是允许自动放置项回填前面留下的空洞，但它会破坏 DOM 顺序与视觉顺序的一致性：
- 启用后，DOM 中第5个元素可能被插进第1行第2列的空隙里，而第2个元素还在第2行——屏幕阅读器仍按源码读，键盘 tab 顺序也照旧
-
grid-template-areas已定义区域时，dense对这些区域内的项无效；它只影响落入隐式网格的未命名项 - RTL 布局中，
row dense仍按 LTR 扫描逻辑填空，可能导致视觉偏移 - 只要存在
grid-row-start: 2或grid-column: span 3这类跨格声明，dense就可能让后续项“跳”到意料之外的位置
真正需要“流向切换”的场景（比如响应式下横排变竖排），别依赖 grid-auto-flow 动态改值，应直接切换整套网格定义：小屏用 grid-template-columns: 1fr + grid-auto-flow: column，大屏切回 grid-template-columns: repeat(auto-fit, ...) + grid-auto-flow: row。记住，它管的是“填空顺序”，不是“布局方向”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
