grid-auto-flow: dense 并非万能填空开关，仅对未显式定位的自动放置项生效，需同时满足存在空洞、有隐式轨道、无手动行列定位三前提；否则仍留白。
用 grid-auto-flow: dense 是实现紧凑排列最直接有效的方式，但它不是万能开关——必须配合显式跨行/跨列行为，否则不会生效。
为什么 grid-auto-flow: dense 看起来没效果？
常见错误现象：加了 grid-auto-flow: dense，但网格项之间仍有明显空隙，尤其在有 grid-row-end: span 2 的元素后面。
- 根本原因：
dense只在「自动放置」时起作用，即当某个网格项**没有手动指定行列位置**（如没写grid-row或grid-column）时，浏览器才会尝试把它塞进前面留下的空洞 - 如果你给所有项都写了
grid-row: 1 / 3、grid-column: 2这类明确位置，那dense就完全不参与计算 - 典型误用：只加
dense，却不控制跨行逻辑，导致高矮不一的项被机械排布，空洞依旧存在
grid-auto-flow: dense 必须搭配的两个前提
它不是独立生效的属性，而是依赖整个布局策略：
- 容器必须启用自动流模式：不能所有子项都用
grid-row-start/grid-column-start硬编码位置；至少部分项要“放养”，让浏览器决定初始落点 - 需要有可被填充的空洞：通常由高度差异大的项产生，比如一个占 3 行的卡片 + 后面几个只占 1 行的小卡片 → 此时
dense才有机会把小卡片往上提 - 推荐组合：
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr))+grid-auto-rows: 10px+grid-auto-flow: row dense，再配合 JS 动态设grid-row-end: span X
容易被忽略的兼容性与副作用
dense 虽然解决空洞问题，但会破坏源顺序（DOM 顺序），这对可访问性和 SEO 有实际影响：
- 屏幕阅读器会按渲染顺序读取，而不是 HTML 顺序；如果视觉上 A 被填到了 B 上方，但 DOM 中 B 在前，就会造成混淆
- 某些旧版 Safari（dense 的实现不一致，可能出现重复渲染或错位
- 性能上无显著开销，但调试时容易误判：你以为是样式问题，其实是
dense把某个没注意的项悄悄挪到了别处 - 替代思路：不用
dense，改用grid-template-areas手动规划区域，或用 JS 做 Masonry 式重排（如 CSScolumn-count+break-inside）
真正难的不是加 dense，而是判断哪些项该放养、哪些该锁定，以及是否愿意为视觉紧凑牺牲语义顺序。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
