网格间隙使内容在网格外增长

Question

考虑以下网格

.cssgrid {
  display: grid;
  grid-template-rows: 15% 85%;
  grid-template-columns: 25% 75%; 
  grid-gap: 1em;
  border: 1px solid #000;
  width: 20em;
  height: 10em;
}

.a {
  background-color: red;
}

.b {
  background-color: blue;
}

.c {
  background-color: yellow;
}

.d {
  background-color: green;
}

<div class="cssgrid">
  <div class="a"></div>
  <div class="b"></div>
  <div class="c"></div>
  <div class="d"></div>
</div>

即使宽度高度应该一起形成100％的间隙，间隙也可以延伸到100％以上。我怎么能有一个空隙-仍然使它占据容器的100％，以便边框可以很好地包含网格的内容？