grid-auto-flow: dense 只能回填已有轨道内的空缺格子，无法生成新行/列填补视觉空白；常见无效场景包括显式指定行列、使用 grid-template-areas 或缺失隐式轨道。
grid-auto-flow: dense 真的能填空白吗？
不能自动“填补视觉空白区域”，它只回填**已有轨道内的空缺格子**，前提是这些格子已经被其他元素腾出、且未被显式占用。比如你有一个 3×3 网格，.item1 占了 grid-column: 1 / 3，那么第 1 行第 3 列就空了；此时 grid-auto-flow: dense 可能让后续小元素塞进去。但它不会凭空生成新行或新列来补全整个网格视觉结构。
常见错误现象：grid-auto-flow: dense 加了却毫无变化——大概率是因为：
- 所有子项都写了
grid-row/grid-column，dense 完全不生效 - 用了
grid-template-areas，区域模板已固化，dense 无权插手 - 只设了
grid-template-columns没配grid-auto-rows，隐式行轨道不存在，dense 无格可填
想让空位置有样式，必须让“空”变成“存在”
Grid 不渲染不存在的轨道，所谓“空状态样式”不是浏览器自动给的，是你得主动让它物理存在或语义存在：
要么用 grid-template-areas 预留槽位：grid-template-areas: "a b c" "d e f"，哪怕只放 3 个真实子项，剩下 3 个位置仍保留，可单独选中 [class*="area-"] 或用 grid-area: d 分配空 <div> 加背景色；
要么用 JS 补 DOM：document.querySelectorAll(".grid > *").length 算出缺几个，动态插入带 class="placeholder" 的空 <div>，再统一设 background: #f5f5f5; border: 1px dashed #ccc;；
立即学习“前端免费学习笔记（深入）”；
别指望 grid-auto-fit 留下可样式化的空轨道——它把空轨道缩成 0，视觉上就是“没了”。
auto-fill 和 auto-fit 哪个更适合填满容器？
日常响应式布局，auto-fit 是更稳的选择：
repeat(auto-fit, minmax(250px, 1fr))) 会让有内容的列拉伸占满容器，空列直接收缩为 0；而 auto-fill 会强行填满宽度、保留所有可能轨道，容易在小屏下生成一堆不可见空列，导致横向滚动或布局错位。
但要注意：minmax() 写法决定它是否真能收缩：
- ✅ 正确：
minmax(250px, 1fr)—— 最大值是1fr，空列才能压成 0 - ❌ 错误：
minmax(250px, 300px)或minmax(250px, 2fr)—— 浏览器静默降级为max-content，空列变硬块 - ⚠️ 隐患：
minmax(min-content, 1fr)—— 若子项含长文本无折行，min-content极大，列数远少于预期
gap 和父容器宽度是隐藏的破坏者
gap 不是空白区域，它是项之间的间距；但它会在最后一行末尾也生效，造成“右侧多出空白”的错觉。调试时先给父容器加 outline: 1px solid red，确认它真有可计算宽度。
父容器若没设 width，或被外层 flex 容器默认的 flex-basis: auto 带偏，Grid 就无法解析 1fr，整行退化为单列——所有自动填充逻辑全部失效。
别在 grid 容器上同时用 display: flex，尺寸解析会冲突；也别在 <table> 内部或 position: absolute 元素上直接应用自动填充。
