grid-auto-flow 须配合 grid-template-columns（或 grid-auto-columns）才能实现换行换列；仅设 grid-auto-flow: row 不换行，因无列约束致单行无限延展；column 模式按列优先填空，受行数限制易错位；dense 启用回填但破坏源序，ie 全不支持。
直接结论：用 grid-auto-flow 控制方向，但必须搭配 grid-template-columns（或 grid-auto-columns）才能让卡片真正“换行”或“换列”，否则它只会横向无限铺开或垂直无限拉长。
为什么 grid-auto-flow: row 却不换行？
这是最常踩的坑：grid-auto-flow: row 是默认值，但它本身不创建列轨道、也不限制宽度——浏览器会把所有未定位卡片塞进“第 1 行”，硬往右挤，直到撑爆容器。
- 只写
display: grid; grid-auto-flow: row;→ 实际是单行无限宽布局 - 必须加列约束，例如：
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) - 如果卡片有
padding或border，实际内容宽度超限，auto-fit可能退化为单列，看起来仍像“没换行” -
grid-auto-rows: minmax(200px, auto)能统一新行高度，但不解决换行问题——换行由列轨道数量变化驱动，不是由行高决定
grid-auto-flow: column 真实行为是什么？
它不是“让容器自动变高后往下堆”，而是按列优先顺序填空：填满当前列（即走完所有可用行），再跳下一列。结果常让人困惑——卡片“消失”或错位，往往是因为行数被锁死了。
- 设了
grid-template-rows: repeat(3, 100px)→ 最多只有 3 行高，第 4 个卡片会落在第 1 行第 2 列，而非第 4 行第 1 列 - 没定义
grid-template-columns→ 所有项挤在“第 1 列”，仍是横排 - Safari 旧版本对
grid-auto-flow: column+grid-template-rows: auto支持不稳定，可能重叠或塌陷 - 想控制“每列最多 N 个项”，不能靠
grid-auto-flow: column自动触发，得用max-height+grid-auto-rows: max-content封顶后逼 Grid 开新列
row dense 和 column dense 到底能不能用？
它们是回填算法，不是“智能换行”。启用后，DOM 后面的元素可能被插进前面的空隙里，视觉顺序和源顺序彻底脱钩。
- 屏幕阅读器、键盘 tab 仍按 HTML 源码顺序走，但用户看到的是跳着排的内容
-
:nth-child(2)可能选中视觉上第 5 个卡片，CSS 逻辑失控 - 只要存在
grid-row: span 2这类跨格项，dense就可能让后续项插进意料之外的位置 -
grid-template-areas已定义区域内的项，dense完全无效 - RTL 布局中，
row dense仍按 LTR 逻辑扫描，可能导致列偏移
真正关键的一点容易被忽略：IE 完全不支持 grid-auto-flow，包括 row 和 column；dense 在所有旧版浏览器中都无效。如果你的项目还要兼容 IE，这个属性就得彻底绕开——别指望它兜底。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
