grid-auto-flow: dense 不能重排，仅优化自动填充：它让未显式定位的小项回填空隙以减少空白，但不改变 dom 顺序、tab 焦点或屏幕阅读器流；只对自动放置项生效，且需配合隐式轨道（如 auto-fit/minmax）才能发挥效果。
grid-auto-flow: dense 能填空，但不等于重排
启用 grid-auto-flow: dense 后，浏览器会尝试把后续小尺寸项塞进前面留下的空隙里，视觉上更紧凑——但它**不改变任何元素的 DOM 顺序、tab 焦点顺序或屏幕阅读器读取流**。它只是优化自动填充逻辑，不是排序工具。
常见错误是以为开了 dense 就能“让第 4 个 div 显示在第 1 个位置”，结果发现 tab 键还是按 HTML 顺序跳，打印样式也照旧。这根本不是排序，只是减少空白。
- 只对未显式设置
grid-row/grid-column的项生效（即靠自动流填入的项） - 若某项已设
grid-row: 3，它不会被dense提前；只有空着的轨道才可能被后来者填补 - 搭配
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)))时效果最明显，尤其瀑布流场景
真正要“视觉重排”，用 grid-area + grid-template-areas
这是唯一能同时保持 HTML 语义顺序、又自由调整视觉布局的方式。关键不是改 DOM，而是用区域名映射把“哪儿显示”和“谁在那儿”解耦。
例如想让 <main></main> 视觉上居左、<aside></aside> 居右，但 HTML 中仍保持 main 在前：
.container {
display: grid;
grid-template-areas: "main aside";
}
main { grid-area: main; }
aside { grid-area: aside; }
常见坑：
-
grid-template-areas每行引号内单词数必须一致，缺一个就整条规则失效（浏览器静默丢弃） - 某个元素漏写
grid-area，或拼错名（如grid-area: asdie），它会回退到左上角默认位置 - 容器没设
display: grid，grid-area完全无效
order 属性只适合同一轨道内的微调
order 只对 Flex 或 Grid 的直系子元素生效，且仅影响**同层同方向轨道内**的视觉次序（比如都在第一行，谁靠左谁靠右）。它不能跨行/跨列“跳跃式重排”。
典型适用场景：导航栏中把 logo 拉到最左、菜单居中、登录按钮靠右，HTML 里它们仍是线性排列。
- 默认值是
0，负值越小越靠前（order: -1比0靠前） - 多个元素设相同
order值，回退到原始 HTML 顺序 - Safari 对 Grid 中
order的支持直到 16.4 版本才稳定，老版本慎用
语义顺序和视觉顺序永远不同步
无论用 grid-area 还是 order，屏幕阅读器、键盘 tab 导航、SEO 抓取都严格按 HTML 源码顺序执行。你看到的“左边是 main”，不等于用户 tab 到的第一个元素就是 main。
如果页面需支持无障碍访问，必须同步调整 HTML 结构——比如把 <main></main> 移到 <nav></nav> 前面，再用 CSS 控制视觉位置。别指望靠 CSS 修复语义。
测试时关掉样式看源码，再开样式对比视觉，是最直接的验证方式。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
