使css网格的每个单元格的高度取决于其行中最大的单元格

Question

我目前正在制作一个网格，该网格将在每个单元格中包含不同数量的项目，并且我目前正面临相应地调整各行中单元格高度的问题：

我希望每个像元的高度与每行中最大的像元的高度相同，但就目前而言，每个像元的高度取决于整个网格中的最高像元。

这是我目前所拥有的模型，请注意第三行中的单元格正确，而第一行和第二行中的单元格太大了。

.grid {
  background-color: red;
  display: grid;
  grid-auto-columns: 1fr;
  grid-auto-flow: column;
}

.grid-column {
  background-color: blue;
  display: grid;
  grid-auto-rows: 1fr;
  grid-auto-flow: row;
  margin: 2px;
  box-sizing: border-box;
}

.grid-row {
  background-color: green;
  margin: 2px;
  box-sizing: border-box;
}

.item {
  background-color: white;
  margin: 2px;
  box-sizing: border-box;
  display: block;
}

<div class="grid">
  <div class="grid-column">
    <div class="grid-row"></div>
    <div class="grid-row"></div>
    <div class="grid-row"></div>
  </div>
  <div class="grid-column">
    <div class="grid-row">
      <span class="item">item 1</span>
      <span class="item">item 2</span>
    </div>
    <div class="grid-row"></div>
    <div class="grid-row"></div>
  </div>
  <div class="grid-column">
    <div class="grid-row"></div>
    <div class="grid-row">
      <span class="item">item 3</span>
      <span class="item">item 4</span>
    </div>
    <div class="grid-row"></div>
  </div>
  <div class="grid-column">
    <div class="grid-row"></div>
    <div class="grid-row"></div>
    <div class="grid-row"></div>
  </div>
  <div class="grid-column">
    <div class="grid-row"></div>
    <div class="grid-row"></div>
    <div class="grid-row">
      <span class="item">item 5</span>
      <span class="item">item 6</span>
      <span class="item">item 7</span>
      <span class="item">item 8</span>
    </div>
  </div>
</div>