使用百分比作为网格间隙时 CSS 网格高度错误

Question

我正在使用其中包含图像的 CSS 网格，并希望在元素之间设置一个间隙，该间隙随网格的大小而缩放。所以我将其设置grid-gap为 2%，但这样做会导致网格高度错误，并导致网格内容与下面的下一个元素重叠。使用其他单位作为grid-gap，例如 vw 效果很好。

如果我想使用百分比作为间隙，如何解决重叠问题？

这是我遇到的问题的最小重现：

.grid {
  display: grid;
  grid-template-columns: repeat(2, auto);
  grid-gap: 10%;
  background-color: #EEE
}

.grid-item {
  display: block;
  width: 100%;
}

<div class="grid">
  <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP839r6HwAHngMKGIKGywAAAABJRU5ErkJggg==" class="grid-item">
  <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP839r6HwAHngMKGIKGywAAAABJRU5ErkJggg==" class="grid-item">
  <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP839r6HwAHngMKGIKGywAAAABJRU5ErkJggg==" class="grid-item">
  <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP839r6HwAHngMKGIKGywAAAABJRU5ErkJggg==" class="grid-item">
  <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP839r6HwAHngMKGIKGywAAAABJRU5ErkJggg==" class="grid-item">
</div>
<p>Why does this line overlap with the grid?</p>

Answer 1

这 10% 的人似乎对 Flex 感到很荣幸。

.container {
   width:90%;
   margin:0 auto;
   display:block;
}

.grid {
  display: flex;
  justify-content:space-between;
  flex-wrap:wrap;
  width:100%;
  background-color: #EEE
}

.grid-item {
  flex:0 0 45%;
  max-width:500px;
  margin:0 0 10% 0;
  display: block;
}

img.grid-item:last-of-type {
   margin-bottom:0;
}

 <div class="container">
<div class="grid">
  <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP839r6HwAHngMKGIKGywAAAABJRU5ErkJggg==" class="grid-item">
  <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP839r6HwAHngMKGIKGywAAAABJRU5ErkJggg==" class="grid-item">
  <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP839r6HwAHngMKGIKGywAAAABJRU5ErkJggg==" class="grid-item">
  <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP839r6HwAHngMKGIKGywAAAABJRU5ErkJggg==" class="grid-item">
  <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP839r6HwAHngMKGIKGywAAAABJRU5ErkJggg==" class="grid-item">
</div>
<p>Why does this line overlap with the grid?</p>
</div>