为什么我的网格中最后一项的高度会影响顶级网格项目的宽度？

Question

https://jsfiddle.net/nqfzks6m/1/1/

上面是我的网格的jsfiddle。如您所见，如果将Card-4-content的高度更改为50px，则卡1稍宽，卡2的宽度较小。是什么原因造成的？网格模板列设置为“自动自动自动自动”。我看不出为什么底行的高度会影响顶级行的宽度。

.base-card {
  border: 1px solid black;
}

.card-1 {
  grid-area: card-1;
  background-color: red;
}

.card-2 {
  grid-area: card-2;
  background-color: blue;
}

.card-3 {
  grid-area: card-3;
  background-color: purple;
}

.card-4 {
  grid-area: card-4;
  background-color: pink;
}

.card-4-content {
  height: 50px;
}

.container {
  display: grid;
  grid-template-columns: auto auto auto auto;
  grid-gap: 25px;
  grid-template-rows: 155px 160px auto auto;
  grid-template-areas: "card-1 card-1 card-2 card-2" "card-1 card-1 card-2 card-2" "card-3 card-3 card-3 card-3" "card-4 card-4 card-4 card-4";
}

<div class="container">

  <div class="card-1">
    <div class="base-card">
      card-1
    </div>
  </div>

  <div class="card-2">
    <div class="base-card">
      card-2
    </div>
  </div>

  <div class="card-3">
    <div class="base-card">
      card-3
    </div>
  </div>

  <div class="card-4">
    <div class="base-card card-4-content">
      card-4
    </div>
  </div>
</div>