grid-auto-flow: dense 会让 tab 键跳转错乱，因为它不改变 dom 顺序，只调整视觉位置，导致屏幕阅读器和键盘 tab 按 dom 顺序聚焦，而焦点却落在视觉前置但 dom 靠后的元素上，造成“看到的和摸到的不一致”。
grid-auto-flow: dense 为什么会让 Tab 键跳转错乱
它不改变 DOM 顺序，只调整视觉位置。屏幕阅读器和键盘 tab 都按 DOM 顺序读取，但 dense 模式让 grid-column 靠后的元素在视觉上跑到前面，造成「看到的和摸到的不一致」。比如 DOM 是 A → B → C，启用 grid-auto-flow: row dense 后渲染成 B → A → C，tab 键仍从 A 开始，但焦点却先落在视觉上更靠前的 B 上——用户会感觉「跳过了第一个元素」。
哪些场景下 dense 模式必然破坏可访问性
以下情况只要用了 grid-auto-flow: dense，基本就等于放弃键盘导航一致性：
- 卡片列表中混用不同
grid-column: span值（如有的 span 2、有的 span 1），dense 会把小卡片往前塞，打乱阅读流 - 配合
grid-template-areas使用——根本无效，还徒增误解；grid-template-areas已固定所有项位置，dense 被忽略 - 子菜单或折叠面板通过 JS 动态插入后启用 dense，新节点自动参与密集填充，但 DOM 插入位置可能在末尾，导致焦点链断裂
- 用
order或 Flexbox 混合布局时开启 dense，两种排序逻辑冲突，tab 顺序彻底不可预测
不用 dense 怎么填空？替代方案更可控
真正需要的是「内容驱动的紧凑」，不是「视觉欺骗式的填空」。优先用这些组合：
-
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr))—— 列数随容器自适应，天然减少空隙 -
gap设小一点（比如gap: 8px），比靠 dense 强行塞更稳定 - 对高度差异大的卡片，用
align-items: start避免底部参差，视觉上更齐整 - 若必须手动控制位置，显式写
grid-row和grid-column，并确保 DOM 顺序与视觉顺序一致
检查 dense 是否已上线的最快方法
打开 Chrome DevTools → Elements 面板 → 选中网格容器 → 右侧 Styles 面板搜索 grid-auto-flow。如果值是 row dense 或 column dense，立刻停用。更关键的是：打开无障碍检查器（Lighthouse → Accessibility → “Keyboard navigation”），运行检测——只要报告「Focus order does not follow visual order」，基本就是 dense 在作祟。
dense 模式本身没有 bug，但它把布局逻辑从「可推导」变成了「不可见调度」。一旦你无法用 DOM 顺序预测焦点路径，就意味着你已经把可访问性交给了 CSS 引擎的内部算法——这不是可控工程，而是赌运气。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
