CSS：在考虑间隙空间时如何让网格尊重边距？ [复制]

Question

我有一个基本网格，其中 2 列应各占 50%，但看起来差距正在消除。我将如何解释这一点并保持身体边缘？

    .grid-container {
        display: grid;
        grid-template-columns: 50% 50%;
        grid-template-rows: 200px 200px;
        grid-gap: 20px;
        margin: 40px;

    }
    .grid-item {
        background-color: red;
        justify-content: center;

    }
    .g1 {
        grid-column-start: 1;
        grid-column-end: 3;
    }

<div class="grid-container">
  <div class="grid-item g1">
    foo
  </div>
  <div class="grid-item">
  </div>
  <div class="grid-item">
  </div>
  <div class="grid-item">
  </div>
</div>

Answer 1

对于列，尝试做 box-sizing:border-box;并删除 grid-gap 属性。 box-sizing 使 CSS 考虑填充和边框。