grid布局中背景图不铺满单元格的常见原因
直接给 grid-item 设置 background-image 但只显示局部、边缘留白，大概率是没控制好背景渲染行为。CSS 默认的 background-repeat: repeat 和 background-size: auto 在固定尺寸的 grid 单元格里容易裁切或缩放失真。
-
background-size: cover或contain必须显式声明，否则图片按原始尺寸平铺或拉伸 - 如果单元格用
fr单位（如1fr），其实际像素尺寸可能动态变化，cover才能保证填满且不畸变 - 别忽略
background-position—— 默认是0% 0%（左上角对齐），常导致关键内容被切掉
用grid-area配合全屏背景的正确写法
想让某个 grid 区域撑满整个视口并承载独立背景，不能只靠 grid-column/grid-row，得结合容器高度控制。最稳的方式是让 grid 容器本身占满 viewport，再用 grid-area 定位背景区域。
- 父容器必须设
height: 100vh（或min-height: 100vh），否则 grid 行高塌陷，背景区域无法伸展 - 定义
grid-template-areas时，把要铺背景的区域单独命名，例如"hero"，然后在对应 item 上写grid-area: hero - 该 item 需加
background-size: cover+background-position: center，避免拉伸偏移
body {
margin: 0;
}
.grid-container {
display: grid;
height: 100vh;
grid-template-areas: "hero";
}
.hero-section {
grid-area: hero;
background-image: url(./bg.jpg);
background-size: cover;
background-position: center;
}
多个grid单元格共享/分割全屏背景的陷阱
当多个 grid-item 横向或纵向拼成一屏（比如左右分栏、上下两块），各自设背景图却出现缝隙或错位，问题往往出在盒模型和网格线精度上。
- 默认
box-sizing是content-box，padding/margin 会让实际尺寸超出 grid 分配空间，造成间隙 —— 统一加box-sizing: border-box - 如果用
grid-gap（或gap），它会在单元格间插入空白，背景必然断开；必须用gap: 0，靠子元素内边距或伪元素模拟“视觉间隙” - 不同屏幕宽度下，
fr分配可能让某列变窄，若背景图宽高比固定，cover会裁剪不同部位 —— 建议用object-fit的思路，改用background-size: 100% 100%并接受轻微拉伸（仅限可控场景）
兼容性与性能提醒：cover/contain在老浏览器的表现
background-size: cover 在 IE9+ 支持，但 IE10–11 对 grid 本身支持极差，所以真要兼容旧版，别用 display: grid 做全屏背景分割。现代项目里，主要风险反而是性能：
立即学习“前端免费学习笔记（深入）”；
- 大图直接设为背景，首屏加载阻塞 CSS 渲染 —— 建议用
image-set()或媒体查询配合srcset逻辑（需 JS 辅助） - 滚动时频繁重绘背景（尤其带
background-attachment: fixed）会导致卡顿，这种效果在 grid 全屏背景下更明显，慎用 - 移动端 Safari 对
background-position: center center的解析偶尔有 1px 偏移，可补transform: translateZ(0)强制 GPU 加速
