gap 不能替代 border，仅提供留白而非视觉线条；用 grid 容器 background 色 + 子项 padding 模拟边框最可靠，需子项显式设 background 色以防背景透出。
gap 不能替代 border，但能避免边框重叠
Grid 的 gap 是间隙，不是边框；它不会渲染线条，只是留白。很多人误以为设了 gap: 1px 就等于有了“分隔线”，结果发现单元格之间是透明/背景色裸露的空隙——一旦父容器背景和子项背景一致，就“看不见”了。
- 真正需要的是视觉上的“线”，而
gap只负责“空” -
gap在 Flex 中不存在，在 Grid 中也**不继承、不可被子元素边框影响** - 若子项本身有
border，且方向相同（比如都设border-right和border-bottom），就会出现双倍粗细或错位重叠
用 background + padding 模拟 border 线最稳
本质是让 grid 容器承担“画线”职责：用自身背景色作为“线色”，靠子项内缩（padding）露出这条背景，形成视觉边框。这绕过了所有 border 渲染冲突问题。
- 给 grid 容器设
background-color（即你想要的“线色”） - 给每个 grid 子项设
background-color（内容区底色），再加padding（比如padding: 2px） - 子项之间自然露出容器背景，宽度 =
padding值 × 2（上下/左右各一端） - 注意：子项不能设
margin，否则会撑开 gap，破坏对齐
```css
.grid {
background-color: #ccc; /* 线的颜色 */
}
.grid > * {
background-color: #fff; /* 单元格内容底色 */
padding: 2px; /* 控制“线宽”的关键 */
}
```border-collapse 思路在 Grid 里不生效
有人想套用表格的 border-collapse: collapse，但 CSS Grid **完全不支持这个属性**——它只对 <table> 生效。强行写上去毫无作用，还可能误导后续调试方向。<ul>
<li>浏览器会静默忽略 <code>border-collapse 在 grid 容器上的声明
border-right + border-bottom），并确保最后一行/列手动清除多余边框响应式下 padding 模拟线要防断点塌陷
用 padding 撑出的“线”在小屏缩放时容易被压缩变形，尤其当配合 minmax() 或 fr 单位使用时，子项尺寸变小但 padding 固定，可能导致内容挤压或空白溢出。
立即学习“前端免费学习笔记（深入）”；
- 推荐用相对单位：比如
padding: 0.1rem或padding: 1%（需配合高度可控的容器） - 更稳妥的做法是结合
@media调整 padding 值，而非依赖单一固定值 - 别忘了测试高 DPI 屏幕：1px padding 在 2x 屏上可能显得过细，考虑用
1px但配合transform: scale(0.5)类方案（慎用，增加渲染负担）
实际做时，最常漏掉的是子项必须显式设置 background-color——哪怕和 body 一样，否则容器背景会直接透上来，导致“线”和“内容”颜色混同，根本分不清哪是哪。
