repeating-linear-gradient 实现棋盘格需确保 background-size 与容器尺寸对齐且横纵值相等，否则出现错位或变形；Grid 容器背景与网格线无直接关联，需双层渐变叠加或结构+边框方案；响应式下应避免 fr 与固定 background-size 冲突，改用 calc(100%/n) 或 CSS 变量配合 JS/Sass 动态控制。
repeating-linear-gradient 实现棋盘格背景时的坐标对齐问题
直接套用 repeating-linear-gradient 做双方向条纹，常出现线条错位、格子变形或边缘“半像素偏移”——根本原因是渐变的重复起点没和容器尺寸对齐。比如设 background-size: 50px 50px，但容器宽高不是 50 的整数倍，渐变会在右/下边缘被截断，导致最后一格不完整。
解决方法是显式控制起始位置与重复范围：
- 用
background-position: 0 0固定左上角为原点 - 确保
background-size中两个值相等（如40px 40px），否则横纵条纹间距不一致，格子变成长方形 - 若需适配响应式，改用
calc()动态计算，例如background-size: calc(100% / 8) calc(100% / 8)（假设 8×8 棋盘）
grid 容器本身不渲染背景，必须单独处理
很多人误以为给 display: grid 的容器加背景渐变就能“自动铺满格子”，其实 Grid 只负责布局定位，background 是作用在容器盒模型上的，和内部 grid-template-rows/columns 无直接关联。也就是说：即使你定义了 8×8 网格，背景仍是一整块渐变图层，不会随每个单元格重绘。
所以真正要实现「每个格子带独立边框」或「视觉上精确对齐网格线」，得走两条路：
- 纯背景方案：用两层
repeating-linear-gradient叠加，且background-size必须与grid-template-columns和grid-template-rows的单格尺寸严格一致（例如都设为50px） - 结构+样式混合方案：不用背景，而是给每个
.item加border: 1px solid #000，再用grid-gap: 0避免间隙；此时背景色由容器统一提供，边框由项目承担
用 grid-gap 模拟棋盘线宽的陷阱
有人尝试用 grid-gap: 1px + background-color: #000 来“假装”是黑线，这在视觉上看似可行，但实际会出问题：
-
grid-gap是间隙，不是边框，它无法被子元素内容覆盖，一旦项目设置了background或z-index，黑线就会被遮挡 - 当容器有
overflow: hidden时，grid-gap在边缘处可能被裁剪，首行/列上方、末行/列右方的“线”消失 -
grid-gap不支持不同方向设置不同线宽（比如横线 1px、竖线 2px），而repeating-linear-gradient可以分别控制
真要模拟可变线宽，还是回到渐变方案：横向用 repeating-linear-gradient(#000, #000 1px, transparent 1px, transparent 50px)，纵向同理但加 90deg，再通过 background-size 分别指定宽高。
响应式棋盘格中 fr 单位与渐变的冲突
如果用 grid-template-columns: repeat(8, 1fr) 做等分布局，容器宽度随屏幕变化，此时若背景渐变仍写死 background-size: 50px 50px，格子大小和背景就彻底脱钩——小屏下背景格子显得粗大，大屏下则稀疏。
可行解法只有两种：
- 放弃
fr，改用repeat(8, minmax(0, 1fr))配合容器width为百分比，再让background-size跟容器计算值绑定（如background-size: calc(100% / 8) calc(100% / 8)） - 完全不用 Grid 布局格子内容，只用 Grid 控制容器尺寸，把棋盘效果全交给
repeating-linear-gradient实现，内容用绝对定位或place-items居中叠加——这样背景和布局始终同步
最易忽略的一点：CSS 自定义属性（--cell-size）无法在 background-size 里直接参与 calc 运算，必须配合 JS 注入或预编译（如 Sass）才能动态驱动渐变尺寸。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
