grid-auto-flow只控制未显式定位的新增项自动填充方向，不重排已有项；设column仍横排是因为缺少列结构依据或首行被跨列项占满，导致无法向下填。
grid-auto-flow 不是翻转已有项的顺序，也不影响显式定位的子元素——它只管那些没写 grid-row 或 grid-column 的“放养项”往哪塞。
为什么设置了 grid-auto-flow: column 却还是横着排？
常见错误是误以为它能重排已渲染的项。实际上：
- 已有项的位置由 DOM 顺序、
grid-row/grid-column或grid-template-areas决定，grid-auto-flow完全不碰它们 - 如果容器第一行已被某个
grid-column: 1 / -1的项占满，后续自动项哪怕设了column，也只能新开一行往下走（因为当前列“高度不够”，无法继续向下填） - 用了
grid-template-areas后，grid-auto-flow对已命名区域内的项失效，只控制未匹配区域的隐式项
row dense 看似省空间，但容易破坏什么？
启用 dense 模式会让浏览器主动把后面 DOM 中的项往前插进空隙，导致：
- 屏幕阅读器读取顺序和视觉顺序不一致（比如 DOM 是 1→2→3，渲染后变成 1→3→2）
-
:nth-child(2n)样式错位——选择器按 DOM 索引匹配，但渲染位置已变 - 键盘 tab 顺序仍按 DOM 流，与焦点可见位置脱节
- 在 RTL 布局中，
row dense仍按 LTR 逻辑扫描填空，可能造成列偏移
怎么确认 grid-auto-flow 是否真正生效？
最直接的验证方式是清空干扰项：
- 删掉所有子元素的
grid-row、grid-column和grid-area - 只保留容器的
display: grid、grid-template-columns（或grid-template-rows） - 观察子元素自然排列是否符合预期方向：设
row就从左到右填满再换行；设column就从上到下填满再换列 - 打开开发者工具 Layout 面板，检查是否有 “Implicit Grid Tracks” —— 若有，说明确实在走自动放置逻辑
真正难处理的不是语法，而是隐式轨道和显式定位混用时的优先级冲突。一旦某个子元素带了 grid-row，它就脱离 grid-auto-flow 管辖范围，而它留下的空洞是否被 dense 填上，又取决于后续项是否也“放养”。这种边界模糊性，才是调试时最常卡住的地方。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
