CSS Grid容器第二行背景色无法填充满容器宽度该如何解决

问题核心原因 #

背景被截断的本质是左内边距加在了Grid容器本身，所有Grid子项的默认渲染范围被限制在容器内边距以内，因此子项的背景色无法覆盖到容器的内边距区域。 #

可行解决方案 #

方案1：将容器内边距迁移到单元格文本层（更推荐，结构更清晰） #

操作逻辑：把原本给容器加的左内边距转移到单元格上，既保留文本的缩进效果，又让单元格背景可以占满容器全宽。
修改后的SCSS代码如下：

.totalContainer {
  display: grid;
  grid-template-columns: 4fr 1fr;
  margin-top: 30px;
  border: 1px solid rgba(72, 82, 93, 0.8);
  border-radius: 12px;

  &__row {
    background-color: #E5E5E5;
  }

  &__space {
    padding: 10px 0; // 移除原有的左内边距
    margin-left: 160px;
    margin-right: 58px;
  }


  &__text {
    font-size: 13px;
    padding: 10px 0 10px 10px; // 新增左内边距，保证文本缩进和原效果一致
  }

  &__result {
    text-align: right;
    padding-right: 20px; // 保留你已经修改的右内边距设置
  }
  // 原有的nth-child margin-right规则可以直接删除
}

方案2：用负margin抵消容器内边距（无需修改原有容器padding） #

如果不方便调整容器的内边距配置，直接给行样式新增两个属性即可：

&__row {
  background-color: #E5E5E5;
  margin-left: -10px; // 负边距抵消容器的左内边距，让背景延伸到容器最左侧
  padding-left: 10px; // 补回文本左缩进，保证文本位置和原有效果完全一致
}

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