我试图创建一个简单的布局，其中我有一个由三行组成的网格。我希望我的第一个元素占据两行，第二个元素占据剩下的一行。这是可行的，但当我引入网格行间距时：30 px;，它似乎为我的第一个元素的高度增加了额外的30 px。

<div id="grid">
    <div id="one">1 - height is actually 332px</div>
    <div id="two">2 - height is 150px, which I'd expect</div>
</div>

<style>
body {
  background: #000;
  color: #fff;
}

#grid {
  display: grid;
  grid-template-columns: 1;
  grid-template-rows: repeat(3, 150px);
  grid-row-gap: 30px; // the problem with this is that it takes space away from the lower rows, but not the top ones. seeming to add height to the top section
  height: calc(450px + 30px);
  width: 600px;
}

#grid div {
    margin: 0;
    padding: 0.75rem;
    border: 3px solid #FFF;
    border-radius: 12px;
    overflow: hidden;
    background: #3A3A3A;
}

#one {
  grid-row: span 2;
  max-height: 300px;
}
#two {
  grid-row: span 1;
}
</style>

我在https://codepen.io/grayayer/pen/xxzQWex做了一个示例codepen
看来这件事应该比现在简单。
我原以为第一个元素的高度是300 px，但实际上是330 px，第二个元素的高度是150 px。