gap: 1px 看似失效是因为它生成的是透明间隙，非视觉边框；只有当grid容器设背景色且子项设不透明背景色时，间隙才以容器背景“透出”形式显形为分隔线。
为什么 gap: 1px 在 Grid 表格中看起来像没生效？
直接设 gap: 1px 后边框“消失”或断开，本质是 Grid 的 gap 是**透明间隙**，不是边框。若容器背景色和子项背景色一致（比如都是白色），那 1px 间隙就完全不可见——你以为没生效，其实是被“藏”起来了。
解决思路很直接：让 gap 区域显形，靠的是**容器背景色 + 子项背景色反差**。
- 容器（
display: grid的父元素）必须设置明确的背景色，比如background-color: #ccc - 所有 Grid 子项（模拟
<td> 的元素）必须有**不透明**的背景色，且不能是 <code>transparent或继承父级 - 子项之间不会重叠，所以 gap 就会以容器背景色“透出”的形式呈现为分隔线
如何用 Grid 模拟带边框表格的 HTML 结构
别套用 <table> 的嵌套结构。Grid 表格应扁平化：所有单元格作为直接子元素，用 <code>grid-column / grid-row 或自动流排布。
推荐写法：
<div class="grid-table"> <div class="cell">姓名</div> <div class="cell">年龄</div> <div class="cell">城市</div> <div class="cell">张三</div> <div class="cell">28</div> <div class="cell">杭州</div> <div class="cell">李四</div> <div class="cell">32</div> <div class="cell">成都</div> </div>
对应 CSS 关键点：
-
grid-template-columns: repeat(3, 1fr)控制列数（这里 3 列） -
gap: 1px必须配合容器背景色才可见 -
.cell { background: white; }—— 这一步漏掉，gap 就是隐形的
兼容性与像素对齐问题（特别是缩放或高清屏）
gap: 1px 在部分浏览器（如旧版 Safari）或系统缩放（125%、150%）下可能渲染为 0.5px 或模糊线，视觉上变虚甚至断裂。
稳妥做法：
- 优先用
gap: 1px，它语义清晰、维护成本低 - 若实测在目标环境出问题，可降级为
gap: 2px，并同步调暗容器背景色（比如从#ccc改成#bbb），保持视觉粗细感接近 1px - 避免用
border模拟边框再手动抵消（如负 margin），容易引发布局错位和响应式失效
为什么不用 border 而坚持用 gap？
因为 border 会让每个单元格自己画边，相邻单元格的 border 会叠加（比如两个 1px solid #ccc 水平紧贴，中间就变成 2px 宽），需要额外处理（border-collapse: collapse 在 Grid 里无效）。
而 gap 是容器级控制，天然单一线宽、无重叠、无合并逻辑，更接近表格语义的本质。
真正麻烦的从来不是写法，而是忘记给 .cell 设背景色——只要漏这一行，整个“边框”就塌了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
