空洞由四类原因导致：显式“.”占位、grid-auto-flow:dense插队、隐式轨道未约束、gap值过大或误用；需针对性调整而非盲目隐藏。
grid-template-areas 中的空字符串会生成空洞
用 grid-template-areas 布局时，只要某一行里写了 "." 或空字符串 ""，CSS 就真会渲染一个透明的空格单元格——它占位置、影响对齐、还可能撑开容器。这不是 bug，是规范行为。
- 写成
"header . sidebar"→ 中间那个.对应的列宽由grid-template-columns决定，但该格子内容为空，视觉上就是“空洞” - 想跳过某格不占位？不能靠
.，得用合并（grid-column: span 2）或重排结构 - 调试时用浏览器开发者工具高亮网格线，一眼就能看出哪些格子是
.撑出来的
grid-auto-flow: dense 导致项目“插队”形成视觉空洞
当设置 grid-auto-flow: dense，且部分项目指定了 grid-row 或 grid-column 跨行/跨列，剩余未定位项目会主动填满前面留下的空缺。结果表面看布局紧凑了，但人眼容易误判为“中间缺了一块”。
- 典型现象：第 3 个元素设了
grid-row: 1 / 3，第 1、2 个没设位置，结果它们被挤到第 2 行右侧，第 1 行左侧出现空白 - 解决方法不是删
dense，而是显式给所有项目分配位置，或改用grid-auto-flow: row（默认值） -
dense会影响可访问性顺序，屏幕阅读器仍按 DOM 顺序读，和视觉顺序可能不一致
隐式网格轨道（implicit grid）意外创建空行/列
当项目数量超出 grid-template-rows 或 grid-template-columns 定义的范围，浏览器会自动生成隐式轨道。这些轨道默认高度/宽度是 auto，如果里面没内容，就表现为“看不见但占空间”的空洞。
- 比如只写了
grid-template-rows: 100px 100px，却放了 5 个子项，后 3 个会落到隐式行中，若它们没设height或内容，那几行高度可能塌缩或撑开不可控 - 加
grid-auto-rows: 0px可强制隐式行不占空间，但要小心：有内容的项目会被裁剪 - 更稳妥的是预估最大项目数，用
grid-template-rows: repeat(5, 100px)显式声明，或配合grid-auto-rows: minmax(100px, auto)
gap 值过大或单位错误放大空洞感
gap 本身不产生空洞，但它会让相邻单元格之间的“间隙”变得异常醒目，尤其在背景色对比强时，看起来像多出来一块空白区域。
立即学习“前端免费学习笔记（深入）”；
- 写
gap: 40px在小卡片布局里，视觉上就像每张卡之间裂开一道缝；换成gap: 0.5rem更适应响应式缩放 - 注意
gap不支持百分比值（gap: 5%无效），用错会回退到默认值，导致布局突变 - 如果只希望列间有空隙、行间紧贴，用
column-gap单独控制，避免误调row-gap
.，要么是隐式轨道没约束，要么是 dense 打乱了预期顺序，再要么是 gap 把缝隙照得太过刺眼——盯住这四个地方，比反复调 display: none 有用得多。 
