用 repeating-linear-gradient 实现网格线更可靠，因其纯 CSS、支持稳定、缩放无锯齿；需注意 background-size 适配 DPR、重置 body margin、避免 Grid 容器内背景错位。
用 repeating-linear-gradient 做网格线更可靠
纯 CSS Grid 本身不生成“背景图案”，它只布局元素；想在页面上铺满网格线（比如稿纸、棋盘、设计参考线），repeating-linear-gradient 是实际可行的方案。浏览器对它的支持稳定，缩放/滚动时也无锯齿或错位问题。
常见错误是试图用 grid-template-columns + grid-template-rows 配合伪元素画线——这只能作用于容器内部，且一旦内容高度超出视口，网格就断了。
- 横向线：用
repeating-linear-gradient(to bottom, #ccc 1px, transparent 1px) - 纵向线：叠加一层
repeating-linear-gradient(to right, #ccc 1px, transparent 1px) - 两层叠加时，注意用
background-blend-mode: normal（默认值），避免颜色混合变灰
background-size 决定网格密度，别硬套固定像素
网格间距不是写死的 20px 就完事。如果希望在高 DPR 屏幕（如 MacBook Retina）上线条仍清晰为 1 物理像素，得配合 background-size 和媒体查询做适配。
典型坑：直接写 background-size: 20px 20px，结果在 2x 屏上每格变成 40 物理像素，线条发虚或消失。
立即学习“前端免费学习笔记（深入）”；
- 推荐用
background-size: calc(20px * 1dppx) calc(20px * 1dppx)（1dppx= 1 device pixel per px） - 或者降级方案：用
@media (-webkit-min-device-pixel-ratio: 2)单独设background-size: 10px 10px - 避免用
em或rem做background-size，字体缩放会意外拉伸网格
全屏覆盖要防 body 默认 margin 和滚动条干扰
即使写了 height: 100vh; width: 100vw;，网格背景仍可能在右下角漏白或偏移——大概率是 body 默认有 margin，或滚动条占位导致 100vw 实际小于视口宽度。
错误现象：background 只铺到可视区右边界，但滚动后右侧出现白边；或网格线在底部突然截断。
- 必须重置：
body { margin: 0; overflow-x: hidden; } - 用
html { height: 100%; }+body { min-height: 100vh; }替代单纯100vh，防止内容少时背景塌陷 - 若需滚动时背景持续，不要给
body设background，改用::before伪元素绝对定位全屏覆盖
Grid 容器内叠加网格背景容易错位
当页面已有 display: grid 的布局容器，再给它加网格背景，常出现背景线和 Grid 轨道不重合。这不是 bug，是两套坐标系没对齐：Grid 的 track 线由 grid-template-columns 定义，而背景图从元素左上角开始平铺。
最容易被忽略的是：Grid 容器的 padding、gap、justify-content 都会让内容区域偏移，但背景图不会自动跟随。
- 若必须对齐，优先用
background-position手动微调，例如background-position: 20px 20px匹配grid-gap: 20px - 更稳的做法：放弃背景图，用
grid-row/grid-column+ 伪元素画线，但仅限静态网格 - 动态列数（如
repeat(auto-fit, minmax(...)))）几乎无法与背景图对齐，此时应接受“视觉参考线”和“布局线”分离的事实
网格背景的核心矛盾在于：它是装饰层，而 Grid 是布局层。强行让二者像素级对齐，往往比换种实现方式更费劲。真正需要对齐时，先确认是否真的需要——多数情况下，人眼并不可靠，差一两个像素根本看不出来。
