应统一用 outline 或 background 实现网格分隔线：outline 配合 outline-offset 微调，background 用 linear-gradient 高性能绘制；避免 grid-gap 与 border 混用导致视觉错乱。
用 grid-gap 配合 border 容易出错
直接给网格容器设 grid-gap: 1px 再给子项加 border，结果常出现双线、漏线或边框重叠。根本原因是 grid-gap 是空白间距，而 border 占据子项自身盒模型空间——两者叠加后视觉不一致，尤其在缩放或高DPI屏上更明显。
实操建议：
- 放弃混合使用
grid-gap和子项border，统一用border控制分隔线 - 让每个子项只画「右侧」和「下侧」边框，避免相邻项重复绘制同一条线
- 网格容器设
overflow: hidden，裁掉最后一行/列多出来的边框溢出
用 outline 替代 border 更稳妥
outline 不影响布局、不占空间，且支持 outline-offset 微调位置，在 Grid 中画等距分隔线时更可控。但要注意它默认是全局绘制，必须配合 outline-offset 向内偏移才能模拟“间隙内的线”。
实操建议：
- 给子项设
outline: 1px solid #e0e0e0，再用outline-offset: -1px把线拉进内容区边缘 - 只对非最后一列的子项加
outline-right，只对非最后一行的加outline-bottom（需用:nth-child或 JS 动态标记） - 注意
outline不支持圆角，若子项有border-radius，得改用box-shadow模拟细线
用 background + linear-gradient 实现高性能分隔线
当网格项数量大（比如百级列表），逐个渲染边框或 outline 可能触发重排。此时用背景渐变一次性画出所有分隔线，GPU 加速更稳，且完全规避盒模型干扰。
实操建议：
- 网格容器设
background-image: linear-gradient(...)，水平方向画竖线，垂直方向画横线 - 例如三列网格：竖线间隔 =
calc((100% - 2px) / 3)，其中2px是两条竖线宽度 - 必须同步设置
background-size和background-position，否则在不同分辨率下线会错位 - 慎用百分比单位——推荐用
px或rem固定尺寸，再结合background-repeat: repeat
响应式网格中分隔线断裂怎么办
媒体查询切换 grid-template-columns 后，原先基于列数写的 :nth-child 边框逻辑或 background 渐变参数会失效，导致某几列突然没线或线变双份。
实操建议：
- 避免硬编码列数逻辑，改用
grid-column-end+::after伪元素在列末尾画线（需 JS 监听resize并更新 CSS 变量） - 用
@container查询替代@media，让分隔线样式随容器宽度而非视口变化 - 最简方案：统一用
border-bottom+border-right，并接受最后一行/列无边框——用户感知弱，维护成本最低
实际项目里，background 方案在复杂响应式场景下最省心，但调试梯度参数容易卡住；outline 方案写起来快，可一旦要兼容旧版 Safari 就得降级 fallback。别低估 outline-offset 的像素级偏移误差——它在 sub-pixel 渲染下可能让线看起来虚化。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
