必须用 position: fixed + top:0;left:0;width:100vw;height:100vh 脱离文档流，清除 padding/margin 偏移，伪元素绘线并 z-index:-1 置底，配合 viewport 元标签和单位统一确保视口坐标系严格绑定。
如何用 CSS Grid 实现真正全屏的背景网格
不是“看起来像全屏”，而是滚动时网格始终铺满视口、不随内容拉伸、不因父容器塌陷而消失——关键在脱离文档流 + 控制坐标系。
-
position: fixed是必须的，否则网格会随页面滚动消失或被内容遮盖 - 必须显式设
top: 0; left: 0; width: 100vw; height: 100vh;，仅靠width: 100%; height: 100%会受父容器限制（比如 body 有 margin 或未设 height） - 避免用
background-image模拟网格——它无法响应 Grid 的grid-template-columns/rows动态调整，也不支持子元素定位
Grid 容器内如何让网格线对齐视口边界
默认 grid 容器的起始线从自身 padding 边缘开始，导致网格偏移。要让第一条竖线紧贴左视口、第一条横线紧贴顶视口，得重置坐标原点。
- 给容器加
padding: 0;和margin: 0;，清除所有偏移来源 - 使用
grid-column-start: 1;和grid-row-start: 1;确保子网格项从第一格开始填满 - 若需网格线精确到像素级对齐（如配合设计稿 8px 基准），优先用
repeat(auto-fit, minmax(XXpx, 1fr)))而非固定列数，避免视口宽度变化时错位
为什么 background-color 会盖住 Grid 网格线
网格线本身不可见，grid-gap 或 gap 只是留白，不是线条。所谓“网格线”实际靠子元素边框、伪元素或背景色拼接实现。
- 直接设
background-color在 grid 容器上，会填满整个容器区域，把后续用::before画的线盖掉 - 正确做法：把背景色设在伪元素上，并用
z-index: -1确保它在最底层；主容器保持透明 - 更稳妥的是用
background-image: linear-gradient(...)绘制交叉线，但要注意background-size必须匹配grid-template-columns计算出的实际单元格尺寸，否则缩放失真
移动端适配时 Grid 网格突然错乱
不是代码写错了，大概率是 viewport 设置缺失或缩放干扰了 vw/vh 的计算精度。
立即学习“前端免费学习笔记（深入）”；
- 确认
<meta name="viewport" content="width=device-width, initial-scale=1">已存在，否则 iOS Safari 会以 980px 宽度渲染，100vw不等于屏幕宽度 - 避免在 Grid 中混用
px和rem单位定义轨道，字体缩放会间接影响rem值，导致列宽突变 - 安卓部分浏览器对
100vh解析异常（如地址栏收起时高度跳变），可改用min-height: 100vh+height: 100%双保险
真正的难点不在画出网格，而在让网格的“坐标系统”和视口严格绑定——任何一层父容器的 padding、transform、overflow:hidden 都可能悄悄切断这个绑定。调试时先检查 computed styles 里的 offsetWidth/Height 是否等于 window.innerWidth/Height，再往下查。
