grid-auto-flow: dense 解决自动放置项跳过空洞的问题，使它们能回填已被跨行/跨列项留下的空白位置；但仅对未显式定位的自动项生效，需配合 grid-auto-rows/columns 且依赖已存在的轨道。
grid-auto-flow:dense 解决什么问题
它让 CSS Grid 在遇到跨行/跨列的 grid-area 项后，能回头填充前面留下的空洞，而不是一味往下或往右顺排。不加 dense 时，Grid 默认是 grid-auto-flow: row（或 column），会严格按顺序“跳过”已被占用的位置，导致视觉上出现明显空白。
典型场景：用 grid-template-areas 布局卡片墙，其中某些卡片占两行，后面小卡片就卡在下一行开头，上面明明有空位却填不上。
怎么开启 dense 模式才真正生效grid-auto-flow: dense 本身不触发重排，它只影响**自动放置（auto-placed）** 的网格项——也就是没写 grid-row/grid-column、也没在 grid-template-areas 中显式声明位置的那些元素。
- 显式定位的项（如设置了
grid-column: 2 / 4）不会被 dense “挪动”
- 只有靠 Grid 自动分配位置的项（比如用
grid-auto-flow + grid-template-columns 动态生成的列表项）才会被重新塞进空隙
- 必须配合
grid-auto-rows 或 grid-auto-columns 使用，否则 dense 没东西可调度
为什么开了 dense 还没效果？常见踩坑点
最常被忽略的是：dense 不改变显式轨道定义，也不“压缩”内容。它只决定自动项的落点顺序。
- 写了
grid-template-rows: 100px 100px，但某项跨了两行，后面自动项仍得等第三行——dense 不会把第三行“拉上来”，它只在已有轨道里找空格子
- 用了
grid-template-areas 后又混用自动项：area 区域外的项才能被 dense 调度；area 内部位置已固化，dense 对它无效
- 父容器高度受限（如
max-height），导致后续轨道被截断——dense 只能在渲染出的轨道范围内找空位，看不见的轨道不算
性能和可维护性提醒grid-auto-flow: dense 会让布局逻辑变隐式：你无法单看 HTML 顺序或 CSS 定义就准确预判某项最终在哪。浏览器得先算一遍所有显式项占位，再回溯填空，对大量动态项可能带来轻微 layout 延迟。
- 在 SSR 或低配设备上，密集重排可能比线性排更耗时，尤其配合
grid-auto-rows: minmax(min-content, max-content)
- 调试时，DevTools 的 Grid 面板会显示 dense 后的实际位置，但源码里看不到对应关系——容易误以为样式写错了
- 如果团队协作中有人习惯“从上到下读 HTML 推布局”，dense 会让这种直觉失效，建议只在明确需要填空的局部模块启用
grid-column: 2 / 4）不会被 dense “挪动”grid-auto-flow + grid-template-columns 动态生成的列表项）才会被重新塞进空隙grid-auto-rows 或 grid-auto-columns 使用，否则 dense 没东西可调度- 写了
grid-template-rows: 100px 100px，但某项跨了两行，后面自动项仍得等第三行——dense不会把第三行“拉上来”，它只在已有轨道里找空格子 - 用了
grid-template-areas后又混用自动项：area 区域外的项才能被 dense 调度；area 内部位置已固化，dense 对它无效 - 父容器高度受限（如
max-height），导致后续轨道被截断——dense 只能在渲染出的轨道范围内找空位，看不见的轨道不算
性能和可维护性提醒grid-auto-flow: dense 会让布局逻辑变隐式：你无法单看 HTML 顺序或 CSS 定义就准确预判某项最终在哪。浏览器得先算一遍所有显式项占位，再回溯填空，对大量动态项可能带来轻微 layout 延迟。
- 在 SSR 或低配设备上，密集重排可能比线性排更耗时，尤其配合
grid-auto-rows: minmax(min-content, max-content)
- 调试时，DevTools 的 Grid 面板会显示 dense 后的实际位置，但源码里看不到对应关系——容易误以为样式写错了
- 如果团队协作中有人习惯“从上到下读 HTML 推布局”，dense 会让这种直觉失效，建议只在明确需要填空的局部模块启用
grid-auto-rows: minmax(min-content, max-content)
dense 不是万能填充剂，它只在自动放置+存在物理空隙+轨道已存在这三个条件同时满足时才起作用。漏掉任意一个，就只是多写了一行没效果的 CSS。
