空白是Grid设计行为而非bug：由grid-template-areas留空、grid-column/row指向空单元格或隐式网格未覆盖导致；可用1/-1跨全宽、点号.占位、dense慎用、媒体查询需列数一致。
空白区域是 grid 自动创建的，不是“bug”而是设计结果
Grid 布局中出现视觉上的空白，通常不是漏写了元素，而是 grid-template-areas 定义了区域但没放内容，或 grid-column/grid-row 指向了空单元格。浏览器不会报错，但会渲染出空隙——这其实是 Grid 的正常行为：每个网格项按规则定位后，未被覆盖的单元格就是空白。
用 grid-column 和 grid-row 合并单元格填满空白
合并本质是让一个元素跨多行/列，从而覆盖原本可能留白的区域。关键看起止线号是否准确，尤其注意线号从 1 开始、且隐式网格线也参与计算。
-
grid-column: 1 / -1表示从第 1 条列线一直延伸到最后一列线（含隐式列），适合全宽横跨 -
grid-row: 2 / 4跨第 2 行到第 4 行（即占第 2、3 两行），别写成2 / 3以为占一行——它只占第 2 行 - 若容器设置了
grid-auto-flow: dense，空白可能被后续项目自动填充，但这会打乱源顺序，慎用
.header { grid-column: 1 / -1; grid-row: 1; }
.sidebar { grid-column: 1 / 2; grid-row: 2 / 6; }
.main { grid-column: 2 / -1; grid-row: 2 / 6; }
用 grid-template-areas 配合点号 . 显式声明空白占位
点号 . 是合法的命名，代表空单元格。它不生成 DOM 元素，但保留网格结构，避免其他项意外挤占位置。适合需要稳定布局、但某些区域确实无内容的场景（比如响应式中隐藏侧边栏）。
- 每行区域名数量必须一致，否则语法错误；
.数量也要对齐 - 不能用
""（空字符串）代替.，会解析失败 - 点号只影响模板定义，不改变实际渲染尺寸——它本身不占空间，但为其他项预留了位置
grid-template-areas: "header header header" "sidebar main main" ". main main";
空白出现在响应式断点里？优先检查 grid-template-areas 是否被覆盖
媒体查询中重定义 grid-template-areas 时，如果新模板行数/列数与原模板不一致，旧的项可能“掉出”新网格范围，变成孤立项并触发自动定位，产生不可控空白。
立即学习“前端免费学习笔记（深入）”；
- 确保各断点下的
grid-template-areas列数一致（可用.补齐） - 避免在断点中只改
grid-template-columns却不调整grid-template-areas，会导致区域名映射错位 - 用
display: contents隐藏某元素但保留其子项参与 Grid 布局时，要小心——父元素消失后，子项可能重新分配到默认网格线，引发空白
