CSS Grid布局垂直跨行单元格设置边框显示不全如何解决

问题成因 #

通过margin-left: -1px偏移单元格抵消相邻双边框的方案，在普通流式布局下可以正常生效，但在CSS Grid布局中存在渲染逻辑问题：设置了grid-row: span跨行属性的元素，负margin偏移仅作用于元素的布局起始位置，不会随元素跨行的高度做连续的边框渲染，再加上Grid行轨道的独立计算特性，最终就会出现垂直边框仅部分区域显示的断裂问题。

推荐解决方法 #

• 方案1：容器+单元格组合边框（最稳定，零兼容问题）
  完全弃用负margin抵消边框的逻辑，从容器层面统一规划边框，从根源避免双边框和跨行元素边框断裂问题，代码如下：

.grid-container {
  display: grid;
  grid-template-columns: 90px 90px 90px;
  grid-template-rows: 24px 24px 27px;
  /* 容器添加上、左外边框 */
  border-top: 1px solid #000;
  border-left: 1px solid #000;
}

.grid-item {
  background-color: #EEEEEE;
  /* 所有单元格统一添加右、下边框，相邻边框不会重叠 */
  border-right: 1px solid #000;
  border-bottom: 1px solid #000;
}

该方案下无论单元格是否跨行、跨列，边框都会完整连续渲染，不需要额外给单元格加偏移样式。

• 方案2：相对定位偏移替代负margin（适合需要单独控制单元格边框的场景）
  如果业务要求必须给单个单元格独立设置全边框，把负margin偏移替换为相对定位偏移即可，相对定位属于渲染层偏移，不会打乱Grid布局流计算，跨行单元格的边框可以完整显示：

/* 给需要抵消双边框的单元格添加该类 */
.border-offset-fix {
  position: relative;
  left: -1px;
  z-index: 1; /* 提高层级避免边框被相邻单元格背景覆盖 */
}

• 方案3：Grid间隙模拟边框（代码量最少）
  利用Grid的gap间隙属性实现天然边框，完全不需要给单元格单独设置边框属性，自动适配所有跨行、跨列单元格：

.grid-container {
  display: grid;
  grid-template-columns: 90px 90px 90px;
  grid-template-rows: 24px 24px 27px;
  gap: 1px; /* 1px间隙作为边框宽度 */
  background: #000; /* 容器背景色即为边框色 */
}

.grid-item {
  background-color: #EEEEEE; /* 单元格自身背景覆盖容器背景，间隙露出的部分就是边框 */
}

注意：该方案下如果单元格需要透明背景，会直接露出容器的边框色，不适合有透明单元格需求的场景。

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