CSS Grid设置border-radius与gap时如何填充元素边角空隙

CSS Grid的gap属性定义的网格轨道间距是完全透明的区域，当单元格设置了较大的border-radius时，四个单元格相邻的对角位置不属于任何一个单元格的渲染范围，会直接透出下方父容器的背景色，仅调整单元格的边框、圆角参数无法填补这类空隙。

方案一：给网格容器设置同色背景（优先选用） #

这是实现成本最低、兼容性最好的方案，不需要改动现有布局逻辑，也不需要新增DOM节点：直接给.grid容器设置和单元格边框完全一致的背景色，透明gap区域透出的颜色就会和边框颜色统一。如果需要让网格整体外边缘的圆角也和单元格匹配，可以给容器加对应圆角并裁剪溢出内容。
修改后的完整CSS代码：

body {
  background-color: red;
}
.grid {
  display: grid;
  grid-template-columns: repeat(3,calc(90vw/3));
  grid-template-rows: repeat(3,calc(90vh/3));
  gap: 1vmin;
  width: 90vw;
  height: 90vh;
  /* 填充gap空隙：设置和单元格边框一致的黑色背景 */
  background: #000;
  /* 可选：统一网格外边缘圆角，避免边角漏红 */
  border-radius: 15px;
  overflow: hidden;
}
.cell {
  height: 100%;
  width: 100%;
  background-color: gray;
  border: 1vmin solid black;
  border-radius: 15px;
}

• 兼容表现：覆盖所有支持CSS Grid的浏览器，无适配问题
• 注意事项：如果单元格设置了透明背景或透明边框，该方案会透出容器的黑色背景，可根据实际显示需求调整溢出裁剪规则

方案二：用容器内边距替代gap实现间距 #

如果有特殊需求不想让整个gap区域填充边框色，可以移除gap属性，改为给.grid容器加和原gap尺寸一致的内边距，同时给容器设置边框同色背景，再通过background-clip控制背景只显示在间距区域。这个方案实现复杂度更高，最终视觉效果和方案一没有明显差异，非特殊场景不推荐使用。

内容的提问来源于stack exchange，提问作者Lucy Faria