grid-gap 与 border 同时使用会导致间距叠加，应设 gap 为 0 并用 border（配合 :nth-child 排除末行/列）或 outline（不占布局空间）实现边界；注意 margin 塌陷、响应式错位及视觉停顿的本质选择。
grid-gap 和 border 一起用会出双倍间距
很多人想靠 grid-gap 控制网格项之间的“空隙”，再加 border 模拟边界感，结果发现视觉上间隔变厚了——其实是 gap 和 border 同时生效，物理距离叠加了。
- 真正想要“带边界的网格”，
grid-gap应设为0，靠每个网格项的border（比如border-right+border-bottom）来画线 - 最后一列别加
border-right，最后一行别加border-bottom，否则右边/底部多出一根线 - 用
:nth-child或grid-column/grid-row定位来剔除多余边框，比 JS 操控更稳
用 outline 替代 border 可避免布局偏移
给网格项加 border 会让元素尺寸变大（除非你写了 box-sizing: border-box），导致整体网格错位或换行异常；而 outline 不占空间，适合纯视觉分隔。
-
outline不支持单边设置（不能只写outline-bottom），得配合outline-offset微调位置 - 若需不同颜色/粗细的上下左右边界，还是得回到
border+ 选择器排除法 - 注意
outline在聚焦态（focus）下会默认出现，生产环境建议加outline: none并用其他方式提供键盘焦点反馈
gap 为 0 时，子元素 margin 会塌陷
当把 gap 设成 0，又在网格项内部用了 margin，容易触发外边距合并（margin collapse），尤其上下相邻项之间看起来“没空隙”甚至贴死。
- 解决办法：统一用
padding代替子元素的margin，或者给网格项设overflow: hidden阻断塌陷 - 如果非要用 margin，记得检查父容器是否是 BFC 上下文（
display: grid本身是 BFC，但嵌套时可能被干扰） - 调试时打开浏览器的“显示边框”功能（DevTools → Settings → Preferences → Elements → Show Rulers），能一眼看出实际占用区域
响应式网格中边界线对齐容易错位
用 repeat(auto-fit, minmax(200px, 1fr))) 这类动态列数时，每行末尾的项宽度可能不是整数像素，加上 border-width: 1px 就会导致右侧边界线模糊或偏移。
- 强制让网格容器宽度为偶数像素（如
width: calc(100% - 1px)）有时能缓解，但不治本 - 更可靠的是用
background-image: linear-gradient(...)在容器上画线，完全脱离子项尺寸影响 - 或者改用
border+transform: translateZ(0)触发硬件加速，减少 subpixel 渲染抖动
边界感的本质不是“画线”，而是“制造视觉停顿”。border、outline、box-shadow、甚至背景渐变都能做到，选哪个取决于你愿不愿意为它多写两行排除逻辑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
