纯边框网格的本质是用grid-gap配合透明背景和单向border“抠”出线条效果：gap设为所需线宽，容器设背景色作画布，border统一方向（如right/bottom），禁用background/padding防遮盖或撑开。
grid布局中只显示边框不占内容区域
纯边框网格的本质是让每个格子只渲染border，内部完全透明且不干扰布局流。关键不是靠border本身，而是用grid-gap配合透明背景+统一border方向来“模拟”出只有线的效果。
- 别给
grid-item设background或padding，否则会遮盖或撑开间隙 - 所有border必须只设在同一个方向（比如统一用
border-right和border-bottom），否则相邻格子的border会重叠变粗 -
grid-gap不能为0——它实际是你想要的“线宽”，比如想实现1px边框，就设gap: 1px，再把border颜色设成你要的边框色 - 容器需设
background-color作为“画布底色”，否则border会透到页面背景上，看不出是“线”
用border-collapse思路改写grid（兼容老浏览器）
Grid原生不支持border-collapse，但可以用outline + outline-offset逼近类似效果，尤其适合需要IE11兼容的场景。
-
outline不会影响盒模型尺寸，比border更干净 - 给每个
grid-item加outline: 1px solid #ccc，再用outline-offset: -1px让轮廓向内收缩，视觉上就拼成连续线 - 注意：
outline不支持圆角、不支持不同方向单独设置，所以只能做直角网格线 - 如果格子有hover或focus状态，
outline可能被覆盖，得额外用outline-style: auto或改用box-shadow替代
避免gap和border双重叠加导致线变粗
这是最常踩的坑：既设了gap: 2px，又给每个item加border: 1px solid，结果看起来像4px粗的线——因为gap留白+左右两个border各1px，视觉叠加了。
- 方案一（推荐）：关闭所有
border，只用gap+ 容器background，比如浅灰容器+白色gap，就自然呈现浅灰网格线 - 方案二：保留border但
gap: 0，用border-right+border-bottom控制，最后一列/行用:nth-child清除多余边框 - 调试时打开浏览器开发者工具的“Layout”面板，勾选“Show grid line numbers”，能直观看到gap和border是否错位
响应式下gap值缩放失真问题
gap支持em、rem甚至clamp()，但直接写gap: 1px在高清屏上会发虚，写gap: 0.0625rem又可能在小屏上太细看不见。
- 用
gap: clamp(1px, 0.25vw, 2px)比固定值更稳，兼顾清晰度和比例感 - 避免用
%单位设gap——它基于容器宽度计算，会导致行列间距不一致 - 如果项目必须适配DPR > 1的设备，建议用
@media (-webkit-min-device-pixel-ratio: 2)单独提升gap值，比如从1px→1.5px
实际做时，最容易被忽略的是容器背景色和gap的耦合关系——没有背景色，gap就是透明的，你根本看不到“线”。边框网格从来不是画出来的，是“抠”出来的。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
