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

【问题标题】：CSS grid height wrong when using percent as grid gap使用百分比作为网格间隙时 CSS 网格高度错误
【发布时间】：2019-04-07 06:14:27
【问题描述】：

我正在使用一个带有图像的 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>

【问题讨论】：

我认为基于百分比的网格行间隙问题仍在解决中。在此期间，您可能希望使用另一个长度单位。 blogs.igalia.com/mrego/2018/08/10/…
使用grid-gap:10vw;而是
@CarolMcKay 工作正常，这是我作为后备所做的，但它仍然不是很理想，因为元素有类似 width: 90%; max-width: 500px 的东西，所以一个恒定的间隙和一个视口相对间隙在某些情况下有效，但在其他情况下有点偏离。
就个人而言，在这种情况下，我会放弃 grid 来使用 flex。

标签： html css css-grid

【解决方案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>

【讨论】：

很好，这看起来很接近。最后要弄清楚的是让每个元素都有正确的纵横比，而不是原来的高度
啊酷，将每个 img 包装在一个额外的 div 中解决了这个问题。那么是的，只需调整百分比就可以让我很好地设置列数！