grid-auto-flow仅控制未显式定位的新项自动填充方向，不重排已有元素；row按行、column按列优先填空，dense会回填空隙但破坏dom与视觉顺序一致性。
因为 grid-auto-flow 只决定“新项往哪填”，不重排已有元素；视觉顺序和 DOM 顺序本就不是一回事，混淆这两者是绝大多数错乱的根源。
grid-auto-flow 不是“重排序开关”
很多人看到 grid-auto-flow: column 就以为所有子元素会按列从上到下重新排列一遍，其实它只影响那些**没写 grid-row 或 grid-column 的项**在自动填空时的扫描方向。已显式定位的项、用了 grid-template-areas 的项、甚至只设了 grid-column: 1 的项，都不会被它挪动。
- 默认
grid-auto-flow: row：新项从左到右、从上到下填空 -
grid-auto-flow: column：新项从上到下、从左到右填空（注意：是“列优先扫描”，不是“整体翻转”） - 如果容器有
grid-template-areas，grid-auto-flow直接失效
order 和 grid-area 都不改变 DOM 顺序
order 属性在 Grid 中**完全无效**——它只对 Flex 容器的直接子元素起作用。Grid 里真正控制单个元素落点的是 grid-row、grid-column 或 grid-area。而这些属性只是“指定位置”，不是“调整顺序”：
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
- 多个元素落到同一网格单元（比如都设
grid-row: 1），它们会按 DOM 顺序堆叠（z-index 默认由源序决定） -
grid-area: sidebar要生效，必须先在容器上有对应grid-template-areas: "header header" "sidebar main" - 拼错
grid-area名称、漏写display: grid、或没定义模板区域，都会导致元素退回到自动放置逻辑，进而受grid-auto-flow影响
dense 模式会让视觉顺序彻底脱离 DOM
grid-auto-flow: row dense 听起来很智能，实际是让浏览器主动把后面 DOM 中的项往前插进前面留下的空洞里。比如第 3 个元素因 grid-column: span 2 占了两格，第 4 个元素本来该排第 2 行第 1 列，但 dense 会让它跳去第 1 行剩的空位——结果就是 DOM 第 4 个，视觉上却出现在第 2 个之前。
-
dense只影响自动放置项，对显式定位项无感 - 它破坏
:nth-child()选择器的可预测性 - 屏幕阅读器仍按 HTML 顺序读，键盘 Tab 也照旧，用户可能 tab 到一个“看起来在中间”的元素，却完全没意识到它在源码里排第四
调试时最容易忽略的一点
别只看开发者工具里的“布局”面板——它显示的是最终视觉结果。真正要确认顺序是否可控，得关掉 CSS，直接看 HTML 源码顺序是否还符合内容逻辑流。如果关 CSS 后结构已经混乱（比如侧边栏写在 <main></main> 前面），那再怎么调 grid-auto-flow 或 order 都只是掩盖问题。响应式换序、语义切换、可访问性保障，最终都绕不开 DOM 结构本身是否合理。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
