grid-auto-flow仅决定未显式定位项的填空顺序，不控制换行或流向；设column仍横排是因未定义列结构，必须配合grid-template-columns等轨道定义才能实现视觉换行。
grid-auto-flow 本身不调整排版方向，它只决定未显式定位的项往哪“填空”——填行？填列？还是见缝就插？真要改变视觉流向，必须配合 grid-template-columns 或 grid-template-rows 定义轨道结构。
为什么设了 grid-auto-flow: column 还是横着排？
不是属性没生效，是浏览器根本没看到“列”的存在：只写 display: grid; grid-auto-flow: column;，浏览器默认列数为 none，所有项全塞进“第 1 列”，这一列无限宽，自然横排。
- 必须显式定义列结构，比如
grid-template-columns: repeat(3, 1fr)或响应式写法repeat(auto-fit, minmax(240px, 1fr))) - 如果同时写了
grid-template-rows: 100px 100px（固定两行），column模式下第 3 个项会直接跳到第 1 行第 2 列——因为“填满当前列”在只有两行时就结束了 - 父容器若没设宽度（如
display: inline-block或未设width/inline-size），auto-fit无法计算列数，退化为单列
为什么 grid-auto-flow: row 不自动换行？
row 是默认值，但它不创建列轨道，也不触发换行。只写 display: grid; grid-auto-flow: row;，结果是所有项挤在一行横向溢出。
- 真正触发“视觉换行”的，是
grid-template-columns或grid-auto-columns定义了列宽或列数 -
grid-auto-rows: 1fr只影响新生成行的高度，不决定“要不要换行”——换行由列轨道数量变化驱动 - 移动端用
minmax(120px, 1fr)时，若卡片带padding后实际宽度 > 容器可用宽度，auto-fit会退化为单列，这是 Grid 轨道计算的预期行为
row dense 和 column dense 的真实代价
dense 不是“更智能的换行”，而是回填算法：允许后续项跳回去填前面留下的空隙。但这个“聪明”有明确副作用。
- DOM 中第 5 个元素可能被插进第 1 行第 2 列的空位，而第 2 个元素还在第 2 行——视觉顺序与源码顺序断裂
- 屏幕阅读器仍按 DOM 顺序读，键盘 Tab 顺序不变，无障碍语义直接受损
- 只要存在
grid-row-start: 2或grid-column: span 3这类跨格声明，dense就可能让后续项“跳”到意料之外的位置 -
grid-template-areas已定义区域内的项，dense完全不起作用
最常被忽略的一点：grid-auto-flow 不翻转已有项，也不重排已渲染内容。所谓“切换流向”，本质是改写 CSS 规则并触发重排——比如用媒体查询切换整套网格定义，而不是靠 JS 动态改 grid-auto-flow 值。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
