如何在网格布局中产生响应间隙

Question

我正在尝试创建具有响应式彩色间隙的响应式网格布局，其中间隙大小与父容器的宽度成比例。问题是垂直间隙没有到达网格的底部。

我创建了一个网格容器，我在其中设置了以 % 为单位的间隙大小和间隙的背景颜色（参见下面的代码和 https://jsfiddle.net/aavvww/o3Lcjd7w/16/）。 如果我以 px 为单位设置固定间隙大小，则不会出现此问题。

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 10%;
  background-color: black;
}

.pic {
  padding-bottom: 100%;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url(https://via.placeholder.com/512);
}

<div class="container">
  <div class="pic"></div>
  <div class="pic"></div>
  <div class="pic"></div>
  <div class="pic"></div>
</div>

这个问题Grid gap percentage without height解释了为什么会出现这个问题，但它没有给出解决方案。

Answer 1

这个问题Grid gap percentage without height 解释了为什么会出现问题。它帮助我找到了以下解决方案：

1. 不设置 grid-gap，而是分别设置 grid-column-gap 和 grid-row-gap，grid-row-gap 等于 grid-column-gap / (1 - grid-column-gap)。李>
2. 将容器的 padding-bottom 设置为 grid-column-gap。

例如：如果 grid-column-gap 为 0.1 (10%)，则 grid-row-gap 为 0.1 / (1 - 0.1) 或 0.1111 (11.1%)。

这适用于 grid-column-gap 的任何百分比值。

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-column-gap: 10%;
  grid-row-gap: 11.1%;
  padding-bottom: 10%;
  background-color: black;
}

.pic {
  padding-bottom: 100%;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url(https://via.placeholder.com/512);
}

<div class="container">
  <div class="pic"></div>
  <div class="pic"></div>
  <div class="pic"></div>
  <div class="pic"></div>
</div>

此解决方案可以扩展到两列以上的网格。如果间隙数为“n”（n+1 列），则 grid-row-gap 为 grid-column-gap / (1 - n * grid-column-gap) 并且 padding-bottom 为 n * grid-column -差距。请参见下面的示例，其中 n = 2（3 列）。

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-column-gap: 10%;
  grid-row-gap: 12.5%;
  padding-bottom: 20%;
  background-color: black;
}

.pic {
  padding-bottom: 100%;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url(https://via.placeholder.com/512);
}

<div class="container">
  <div class="pic"></div>
  <div class="pic"></div>
  <div class="pic"></div>
  <div class="pic"></div>
  <div class="pic"></div>
  <div class="pic"></div>
  <div class="pic"></div>
  <div class="pic"></div>
  <div class="pic"></div>
</div>

Answer 2

body{
height: 100%;
}
.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 10%;
  background-color: black;
  padding-bottom: 9%;
}

.pic {
  padding-bottom: 100%;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url(https://via.placeholder.com/512);
}

<div class="container">
  <div class="pic"></div>
  <div class="pic"></div>
  <div class="pic"></div>
  <div class="pic"></div>
</div>