grid-auto-flow: dense 仅对未显式定位的项生效，显式设置 grid-row/column 或使用 grid-template-areas 会使其失效；空单元格唯一合法写法是单个英文点号 .（前后需空格）；视觉空洞多由 gap 过大、隐式轨道失控或行高浮动导致。
grid-auto-flow: dense 不是处理空单元格的“优雅开关”，它只对没写 grid-row、grid-column 或 grid-area 的项起作用——显式定位过的元素，它完全不管。
为什么 grid-auto-flow: dense 完全没反应
写了却没效果，八成是因为根本没触发自动放置逻辑：
- 所有子项都用了
grid-row/grid-column—— dense 只调度“无家可归”的项 - 父容器用了
grid-template-areas—— 区域模板已固化位置，dense 无效 - 只设了
grid-template-columns却没配grid-auto-rows—— 没有隐式行轨道可填 - 同时写了
grid-template-rows和grid-auto-rows—— 显式行覆盖自动行，dense 失去作用范围
grid-template-areas 里怎么写空单元格才合法
唯一被规范接受的写法是单个英文点号 .，且必须前后用空格分隔：
-
"header header ."✅ 第三列为空单元格 -
"header header .."❌ “..”不被识别 -
"header header ""❌ 空字符串导致整条声明失效 -
"header header "❌ 末尾空格不算占位，整行解析失败
. 本身不撑开轨道尺寸。想让空列可见，必须配合显式列宽，比如 grid-template-columns: 200px 1fr 100px。
动态“清空”某个区域，别改 grid-area
用 JS 设置 el.style.gridArea = "" 或 el.style.gridArea = "none" 都不可靠：
-
none是无效值，浏览器会忽略 -
""虽合法，但元素仍在网格流中，只是变成“无名项”，不会生成真正空位
更可控的做法是预设占位节点：
HTML 里放一个 <div class="placeholder" aria-hidden="true"></div>；
CSS 中绑定区域：.placeholder { grid-area: sidebar; }；
需要“清空”时，加类 .hidden { visibility: hidden; }，不破坏布局流。
视觉上“多余空洞”，往往不是空单元格本身的问题
常见真实原因是：
-
gap值过大（比如gap: 40px在小卡片里像裂开一道缝），建议换为相对单位如gap: 0.5rem - 隐式轨道未约束：子项超出
grid-template-rows后，浏览器自动生成的隐式行默认高度是auto，内容为空时可能塌缩或异常撑高；解决方法是用grid-auto-rows: minmax(100px, auto)给隐式行设基准高度 -
grid-auto-flow: dense从不生成新轨道，也不压缩内容——它只在已有轨道中插空。一旦容器高度受限，或子项用了minmax()+auto导致行高浮动，dense 就基本失效
事情说清了就结束。空洞从来不是凭空出现的，它要么是显式写的 .，要么是隐式轨道失控，要么是 gap 放大了间隙感——盯住开发者工具里的网格线编号，比猜更管用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
