grid-auto-flow: dense 仅在无显式定位、固定轨道且自动流的狭窄条件下生效，断点变化易破坏其触发条件；应优先通过显式轨道控制、span 配合媒体查询，或源头确保 item 数量匹配列数来避免空位。
grid-auto-flow: dense 在断点中根本不起作用？
写了 grid-auto-flow: dense 却发现小屏下空格子还在、大屏下也没自动填空——大概率不是写错了，而是它压根没被触发。dense 只调度那些“没被安排过位置”的子项，一旦你在任意断点里给某个 item 写了 grid-column、grid-row 或 grid-area，它就彻底退出调度队列。
常见陷阱：
- 用
grid-template-areas定义了所有区域 → dense 对所有命名区域内的项完全无效 - 响应式中只改
grid-template-columns，却漏掉grid-auto-rows→ 没有隐式行轨道，dense 就无格可填 - 在某断点里加了
grid-row: 1控制首项位置 → 整个流被“锚定”，后续项即使没显式定位，也因上下文被污染而无法触发 dense 回填
想让不同断点下都“自动合并空位”，别依赖 dense
真正能跨断点稳定填空的，从来不是 grid-auto-flow: dense，而是靠显式轨道控制 + span 配合媒体查询。比如一个卡片列表，在桌面端希望 3 列、高度不一；在移动端变成单列、但某些重要卡片要跨两行：
- 桌面端：用
grid-template-columns: repeat(3, 1fr)+grid-auto-rows: minmax(100px, auto)，关键卡片加grid-row: span 2 - 移动端：改
grid-template-columns: 1fr，同时用@media (max-width: 768px)覆盖关键卡片的grid-row，避免它在单列里强行跨行撑高整列 - 注意：不要混用
grid-row: 1 / 3和grid-row: span 2→ 前者依赖固定线号，后者依赖自动行生成，逻辑冲突会导致静默失效
gap 和跨列/跨行合并共存时的视觉错位
当某个 item 用 grid-column: 1 / -1 横跨全宽，又和普通卡片共用同一容器，gap 会照常作用于它上下两侧——结果就是它和前后卡片之间多出一倍间距。这不是 bug，是 gap 的设计本意：它管的是“轨道之间”，不是“内容之间”。
- 修复方式：给跨列项单独加
margin-top: -12px（值 =row-gap）抵消上侧 gap，再用margin-bottom: -12px抵消下侧 gap - 更干净的做法：把跨列项抽成独立网格容器，用
display: contents让它不产生盒子，但保留子项参与父级 grid 布局 —— 注意 Safari 15.4 以下不支持，需降级为 wrapper div + 手动 margin - 绝对不要用
gap+ 子项margin混合控制间距 → 多端渲染差异会放大错位，尤其 iOS Safari 中 gap 计算偶尔跳帧
真正优雅的“空单元格处理”，其实是放弃填空
很多所谓“空单元格”，本质是内容缺失或异步加载失败导致的视觉断裂。这时候硬用 dense 或 span 强行补位，反而破坏语义顺序和可访问性。更务实的做法是：
- 服务端或 JS 层确保返回的 item 数量是 3 的倍数（桌面）或 1 的倍数（手机），从源头减少空位
- 用
:empty伪类 +display: none隐藏空占位符，比留白更可控 - 对瀑布流类布局（如 column dense 场景），直接换用
column-count+break-inside: avoid，规避 grid 的隐式轨道不可控问题
grid-auto-flow: dense 不是万能钥匙，它只在“自动流+固定轨道+无显式定位”这个狭窄交集里有效。断点一变，三个条件就容易崩一个。真要稳，就得接受：优雅不是自动填空，而是提前不让空出现。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
