根本原因是容器高度失控、背景渲染行为未显式控制或网格区域定义与元素未对齐；需重置html/body样式、用min-height:100vh、显式设background-size:cover和background-position:center，并确保grid-area与grid-template-areas严格匹配。
背景图在 Grid 分割布局里不填满、错位、留白或响应式失效，根本原因不是图片本身，而是容器高度失控、背景渲染行为没显式控制、或者网格区域定义和实际元素没对齐。
grid-container 高度必须撑满视口且无干扰
很多背景只显示半截，是因为 html 和 body 没重置默认样式，导致子级 height: 100% 失效；而直接写 height: 100vh 又容易被地址栏、滚动条或盒模型误差截断。
-
html, body { margin: 0; padding: 0; height: 100%; }是前提，缺一不可 - 主网格容器用
min-height: 100vh，比height: 100vh更安全——内容超长时不会被裁剪 - 避免给容器设
overflow: hidden，它会掩盖因padding/border导致的实际溢出，让背景“消失”得莫名其妙 - 如果用
fr单位定义行高（如grid-template-rows: 1fr 2fr），确保父容器有明确高度，否则fr无法计算
background-size 和 background-position 必须显式声明
Grid 单元格尺寸是动态的，background-image 默认按原图尺寸平铺或拉伸，cover 和 contain 不会自动生效。
-
background-size: cover是最常用解法，但需配合background-position: center，否则关键内容常被裁掉 - 若单元格高度为
auto，背景可能根本不显示——此时必须加min-height: 100vh或用aspect-ratio锁定比例 - 别依赖
background-repeat: no-repeat就完事，它只禁重复，不解决缩放问题 - 在高 DPR 屏幕上，
background-size: 20px 20px会导致网格线发虚，应改用calc(20px * 1dppx)或媒体查询降级
grid-template-areas 和 grid-area 必须严格配对
命名区域写错大小写、漏引号、或子元素没声明 grid-area，都会让背景“找不到位置”。这不是兼容性问题，是配置断裂。
立即学习“前端免费学习笔记（深入）”；
-
grid-template-areas中区域名必须用双引号包裹，换行用分号分隔："hero hero" "content sidebar" - 对应子元素写
grid-area: hero（无引号），名字完全一致，区分大小写 - 想让多个元素重叠在同一区域（比如背景层 + 内容层），就都设成同一个
grid-area名，靠 DOM 顺序或z-index控制叠放 - 响应式下必须重写整个
grid-template-areas，只改grid-template-columns会导致区域错位、文字堆叠
背景与内容分离时优先用伪元素承载
把 background-image 直接写在内容容器上，会让背景缩放、模糊、定位和文字样式强耦合，一动全崩。
- 用
::before伪元素单独承载背景，内容容器保持语义干净：.hero-section::before设背景，.hero-section > *只管内容 - 伪元素需加
content: ""、position: absolute、inset: 0和z-index: -1，才能真正铺满且不占流 - 避免用
background-attachment: fixed，它在 Grid/Flex 容器中行为不稳定，Safari 尤其容易失效 - 如果用空
<div> 承载背景，必须让它参与网格布局（如 <code>grid-area: hero），否则会破坏轨道计算最容易被忽略的是：Grid 区域本身不“拥有”背景，它只是坐标系；背景是否显示、如何缩放、在哪叠加，全靠你对容器尺寸、盒模型、背景属性的联合控制。写错一行
min-height或漏一个background-position，整块背景就偏移或塌缩——它不会报错，只会静默失效。
