CSS Grid 本身不提供“复杂边框”能力，所谓“复杂边框”必须靠 gap、outline、box-shadow 或伪元素组合实现，纯靠 border 会出错。
直接说结论：CSS Grid 本身不提供“复杂边框”能力，所谓“复杂边框”必须靠 gap、outline、box-shadow 或伪元素组合实现，纯靠 border 会出错。
为什么 grid-border 不能直接设成“复杂边框”
CSS Grid 的 border 是作用在容器（grid container）上的普通盒模型边框，它只包围整个网格，不作用于内部网格线或单元格之间。试图给 .grid-container 设置 border: 3px double #333，只会得到一个外框，和“网格内部分割边框”完全无关。
- 常见错误现象：
grid-template-columns: 1fr 1fr+border: 1px solid #ccc→ 看起来像两列中间没分隔线 - 真实需求其实是“列与列之间、行与行之间有不同样式/宽度/颜色的间隔”，这本质是间距控制，不是边框
- 用
border强行模拟（比如给每个grid-item加border-right/border-bottom）会导致最后一列/行多出冗余边框，响应式下极易错位
用 gap 搭配 background 实现“视觉边框”
这是最稳定、语义清晰、响应式友好的做法：把 gap 当作“边框通道”，用容器背景色模拟边框颜色，再让子项背景色盖住它。
- 设置
gap: 2px，容器background-color: #e0e0e0（即“边框色”） - 每个
grid-item设置background-color: white（或内容底色），自然露出间隙作为分隔线 - 若需“双线”效果，可设
gap: 4px，再用box-shadow: inset 0 0 0 1px #999, inset 0 0 0 2px #fff在 item 上模拟内边框 - 注意：gap 值必须是固定单位（
px、rem），不能用%或fr，否则计算不可控
需要虚线/点线/渐变分隔？用伪元素精准控制
当 gap 不够用（比如要虚线分隔、斜线分割、带 icon 的分隔线），就得放弃“间隙模拟”，改用绝对定位伪元素画线。
立即学习“前端免费学习笔记（深入）”；
- 给 grid 容器设
position: relative - 用
::before或::after绘制单条线：content: ""+position: absolute+top: 50%+left: 0+right: 0+border-top: 1px dashed #666 - 若需多条垂直分隔线，配合
grid-template-columns计算列线位置（如第二列起始线是calc(1/3 * 100%)），但仅适用于固定列数场景 - 避免对每个
grid-item单独加伪元素——会导致重绘开销大，且跨行项目会遮挡线条
别碰 grid-line 的“伪边框”幻想
有人查文档看到 grid-line 名词，误以为能直接设置线样式。实际上：grid-line 只是逻辑坐标（如 grid-column-start: 2），不是可渲染的视觉实体。浏览器根本不暴露网格线的绘制接口，所有“线”都得靠开发者用其他 CSS 手段模拟。
- 试图用
outline模拟（如outline: 1px solid red）会破坏布局流，且 outline 不支持圆角、虚线等精细控制 - 用
box-shadow模拟内边框时，注意inset阴影会叠加在 item 内容上，可能遮挡文字或图标 - 真正复杂的边框需求（如带箭头的分隔线、带徽章的列标题分隔），建议退一步：用 SVG 覆盖在 grid 上，而非硬塞进 CSS Grid 规则里
真正难的不是怎么画线，而是想清楚这条“边框”到底属于谁：是列之间的关系？行之间的节奏？还是某个区域的视觉边界？选错归属层，后面所有代码都在补洞。
