html - 应用行间距（row-gap）网格容器高度后的CSS Grid小于网格本身

Question

我制作了一个简单的 Grid 容器：

.grid-container {
    border: 2px solid red;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    row-gap: 6%;
 }
 
 .grid-item {
   background: #4F5C40;
   border: 1px solid black;
   height: 150px;
   width: 150px;
 }
 
 .grid-neighbour {
   background: #404F5C;
   height: 150px;
   width: 100%;
 }

<div class="grid-container">
   <div class="grid-item"></div>
   <div class="grid-item"></div>
   <div class="grid-item"></div>
   <div class="grid-item"></div>
   <div class="grid-item"></div>
   <div class="grid-item"></div>
   <div class="grid-item"></div>
   <div class="grid-item"></div>
   <div class="grid-item"></div>
</div>
<div class="grid-neighbour"></div>

问题是在我申请之后row-gap: 6%，我的 .grid-container 高度变得小于网格本身。因此，下一个元素.grid-neightbour占据了网格最后一行的一些空间，导致隐藏了一些内容。

我究竟做错了什么？

标签： htmlcsscss-grid