grid-auto-flow: dense 不填补视觉空白，仅对未显式定位的网格项在已有轨道内回填孤立空格；它不生成新轨道、不渲染占位格，生效需满足无显式定位、存在隐式轨道等条件。
grid-auto-flow: dense 根本不“填空白”，它只回填已有轨道里的空格子
写了 grid-auto-flow: dense 却没变化？不是你写错了，是它压根就不是为“填补视觉空白”设计的。dense 的作用非常具体：当某些网格项（比如 grid-column: span 2）在某行留下一个孤立空格时，后续**未显式定位**的项，才可能被调度过去塞那个空位。它不会生成新行、新列，也不会让空位置“自动渲染成带背景的占位格”。
常见无效场景包括：
- 所有子项都写了
grid-row或grid-area—— dense 完全不启动 - 用了
grid-template-areas—— 区域模板已固化，dense 插不进任何东西 - 只设了
grid-template-columns，但没配grid-auto-rows—— 隐式行轨道不存在，dense 无格可填 - 混用了
grid-template-rows和grid-auto-rows—— 显式行会覆盖自动行逻辑，dense 失去作用范围
想让“空位置”有样式？得先让它物理存在或语义存在
Grid 不渲染不存在的轨道。所谓“空单元格有边框/背景”，必须是你主动让它存在。两种可靠方式：
- 用
grid-template-areas预留槽位：grid-template-areas: "a b c" "d e f"，哪怕只放 3 个真实子项，剩下 3 个位置仍保留，可用[class*="area-"]或grid-area: d单独选中并加样式 - 用 JS 补 DOM：
document.querySelectorAll(".grid > *").length算出缺几个，动态插入带class="placeholder"的空<div>，再统一设background: #f5f5f5; border: 1px dashed #ccc;
别指望 grid-auto-fit —— 它把空轨道缩成 0，视觉上就是“没了”。
立即学习“前端免费学习笔记（深入）”；
row dense 和 column dense 的填空逻辑完全不同
方向决定“找空位”的路径，也决定最终视觉跳跃程度：
-
grid-auto-flow: row dense：按行扫描，每行从左到右找空位；适合横向内容流，视觉更连贯 -
grid-auto-flow: column dense：按列扫描，每列从上到下找空位；但“找空位”只在当前列内发生，不会跨列回填；窄屏下容易出现左边一长列、右边突然冒一个的错觉
两者都不改变 DOM 顺序，但 column dense 在项高度差异大时，更容易让屏幕阅读器和键盘导航用户困惑。
真正能减少空白的组合：auto-fill + minmax + auto-rows
如果你的目标是“等宽卡片自适应列数、尽量不留白”，grid-auto-flow: dense 反而是次要的。核心是轨道定义本身：
- 用
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr))让列数随容器宽度自动增减 - 配
grid-auto-rows: auto让每行高度贴合内容，避免固定高导致的纵向留白 - 再加
grid-auto-flow: row dense—— 这时 dense 才有机会在换行后的小空隙里插一个矮卡片 - 用
gap统一间距，别依赖padding混乱列宽计算
注意：minmax(200px, 1fr) 中的 1fr 是弹性部分，如果所有项都设了 grid-column: span 2，dense 依然不会拆分它们去适配空隙——跨度是刚性的，它只填空，不压缩。
最常被忽略的一点：dense 解决的是“已有轨道内的局部空隙”，不是“响应式断点后的整体重排”。小屏下要收列、调间隙、重平衡，靠的是媒体查询改 grid-template-columns，不是靠 dense “智能修复”。
