html - 使用百分比作为网格间隙时 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>