justify-content: center只控制网格轨道在主轴上的整体位置，无法让容器占满视口；需配合width/height: 100vw/vh、清除body margin或flex包裹等方案实现背景铺满与内容居中分离。
grid容器内容居中但背景要铺满整个视口，为什么justify-content: center不够用？
因为justify-content: center只控制网格项在容器主轴上的对齐，而容器本身可能没占满视口——比如body有默认margin、父级没设height: 100vh，或者容器被padding挤压。结果就是：内容看着居中了，但背景色/图只覆盖了那个“缩水”的容器区域，上下左右留白。
真正要的是「内容在视口中心，背景从左顶角铺到右底角」，这得拆成两层处理：
- 用
position: fixed+top: 0; left: 0; width: 100vw; height: 100vh让背景层脱离文档流、强制撑满 - 把内容层放在普通文档流里，再用
place-items: center或display: flex居中 - 确保背景层
z-index: -1，否则会盖住内容
用margin: -X拉伸网格容器来填满视口，靠谱吗？
不推荐直接靠负margin强行“撑开”容器。它容易触发意外的布局偏移或滚动条，尤其当父容器有overflow: hidden或border时，负边距会被裁掉。
更稳的做法是让容器自己占满：
立即学习“前端免费学习笔记（深入）”；
- 给
body加margin: 0，清除浏览器默认偏移 - Grid 容器设
width: 100vw; height: 100vh（不是100%） - 如果必须用负
margin，只用于抵消gap导致的背景断层，例如gap: 2rem配margin: -1rem
多列划分时如何让中间一列内容居中、两侧做全屏背景延伸？
典型场景：三栏布局（1fr 2fr 1fr），想让中间2fr放文字并水平垂直居中，两侧1fr用作纯色背景延伸，视觉上形成“内容居中+背景溢出”效果。
关键不是靠列宽“假装”延伸，而是利用grid-area和伪元素：
- 定义
grid-template-areas: "left main right"，其中main对应中间列 - 给
.main设place-self: center，确保它在自身格子内居中 - 两侧列（
.left,.right）不放内容，只设background-color，并加min-width: 100vw或用::before伪元素+position: fixed向视口外延展 - 避免用
fr单位做背景列——它依赖容器宽度，一旦容器没占满视口，背景就断了
移动端下100vh失效导致背景被截断，怎么救？
iOS Safari 在地址栏收起/展开时会重算100vh，造成背景突然跳变或留白。这不是 Grid 的问题，而是视口单位本身的缺陷。
临时缓解方案（非根治）：
- 用
min-height: 100vh代替height: 100vh，允许容器随内容微调 - 监听
resize事件，用 JS 动态写style.height = window.innerHeight + 'px'（注意防抖） - 最稳妥：放弃
vh做背景高度，改用background-image: linear-gradient()+background-size匹配设计稿像素值，绕过视口计算
真正难处理的，从来不是怎么写居中，而是怎么让「居中」和「全屏背景」互不干扰——前者依赖容器尺寸，后者依赖视口坐标系，硬凑在一起，十次有九次踩坑。
