html - 如何在网格布局中有响应间隙

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>