grid-auto-flow: dense 会让阅读顺序出问题，因为它不改变 dom 顺序，仅允许后续自动放置项往前插空，导致第5个元素视觉上出现在第1行第2列而第2个仍在第2行第1列，使屏幕阅读器、tab键顺序和:nth-child()选择器与视觉位置严重错位。
grid-auto-flow: dense 为什么会让阅读顺序出问题
它不改变 DOM 顺序，只让自动放置的项“跳着插空”——比如第 5 个 <article></article> 可能被塞进第 1 行第 2 列，而第 2 个还在第 2 行第 1 列。屏幕阅读器、键盘 Tab 键、:nth-child() 选择器全按 HTML 顺序走，但视觉上完全错位。
哪些场景绝对不能开 dense
只要内容存在逻辑流向或语义依赖，就别碰 grid-auto-flow: dense：
- 文章列表、新闻流、博客归档（用户靠滚动顺序理解时间线）
- 表单字段组（
label和input的邻近关系影响可访问性） - 步骤引导、流程图卡片（第 1 步 → 第 2 步 → 第 3 步 必须视觉+DOM 一致）
- 任何用了
order或flex混合布局的容器（dense 会和 order 冲突，结果不可预测）
想紧凑又保顺序？换 column-count + break-inside
这是目前唯一稳定、无需 JS、兼容性好、且不破坏阅读流的 Masonry 类替代方案：
- 父容器设
column-count: 3（或响应式值如column-count: max(2, min(4, (100vw - 48px) / 320px))） - 每个子项加
break-inside: avoid，防止被断在两列之间 - 禁用
column-gap，改用margin或padding控制间距，避免列宽计算偏差 - 不要给父容器设
height或align-items，否则列高平衡失效
浏览器原生按列流式填入，DOM 顺序 = 视觉顺序 = 屏幕阅读器顺序，没有回填、不跳项、不重排。
如果非要用 dense，至少守住这三条底线
仅限仪表盘、图库、纯展示型卡片墙等顺序无关场景：
- 确保所有子项都没写
grid-row、grid-column或grid-area—— dense 只对自动放置项生效 - 显式定义
grid-auto-rows（如grid-auto-rows: minmax(200px, auto)），避免隐式行高度塌缩或爆炸 - 用 DevTools 的 Grid 面板确认最终位置，再手动检查键盘 tab 顺序和屏幕阅读器朗读流是否断裂
真正难的不是让布局“看起来满”，而是让满的同时不牺牲可访问性——dense 模式本身没 bug，但它把“顺序一致性”这个责任悄悄转嫁给了开发者，而这点最容易被忽略。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
