grid-auto-flow仅控制未显式定位的新项填充方向，不翻转已有项；设column却横排是因未定义列结构，dense模式会破坏dom顺序与视觉一致性。
grid-auto-flow 不是翻转已有项的开关，它只管“新来的、没指定位置”的项往哪塞——填行？填列？还是见缝就插？搞错这点，调半天也看不到效果。
为什么设置了 grid-auto-flow: column 但内容还是横着排？
常见现象：加了 grid-auto-flow: column，子元素却仍在第一行从左到右铺开，没往下堆。
- 根本原因：你没定义
grid-template-columns，或者只写了grid-template-rows—— 浏览器默认列数为none，所有项被挤进“第 1 列”，而这一列无限宽，自然全横着了 - 必须显式设置列结构，比如
grid-template-columns: repeat(3, 1fr)或响应式写法repeat(auto-fit, minmax(200px, 1fr))) - 如果还设了
grid-template-rows: 100px 100px这种固定行数，column模式会直接把第 4 个项扔进第 4 列第 1 行，而不是“往下堆”——因为行数被锁死了，没空间生成新行
row dense 和 column dense 看似省空间，实际很危险
启用 dense 后，浏览器会主动把 DOM 后面的项往前插进空洞，视觉顺序和源顺序不再一致。
- 屏幕阅读器按 DOM 顺序读，但用户看到的是“跳着排”的内容，语义断裂
-
:nth-child(2)可能选中视觉上第 5 个元素，CSS 逻辑失控 - 只要存在跨行/跨列项（比如
grid-row: span 2），dense就可能让后续项插进不该去的位置 - 在 RTL 布局中，
row dense仍按 LTR 逻辑扫描，容易导致列偏移
想实现“每列最多 N 个项，超了就新开一列”，光靠 grid-auto-flow: column 不行
很多人想模仿垂直流卡片墙（类似“三列，每列最多 4 个，第 5 个自动进下一列”），但 grid-auto-flow: column 只负责“填满当前列再换列”，不控制“列容量”。它不会因为你放了 4 个就自动开新列——列数由 grid-template-columns 决定，不是由项数触发的。
- 真正可控的做法：用
max-height+grid-auto-rows: max-content配合grid-auto-flow: column - 例如多选标签组：
max-height: 96px（约 3 行 × 32px）+grid-auto-rows: max-content→ 容器高度封顶后，Grid 自动把溢出项推进下一列 - 别依赖
grid-auto-rows: 1fr，它会让每行撑满剩余空间，破坏“固定行数”预期
最容易被忽略的一点：IE 完全不识别 grid-auto-flow，包括 row 和 column，一律退化为默认行为；而 dense 在所有旧版浏览器里都无效。如果你的项目还要兼容 IE，这个属性就得彻底绕开。另外，只要用了 grid-template-areas，grid-auto-flow 对已命名区域内的项就完全失效——它只管那些“没被 area 收编”的漏网之鱼。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
