为什么网格间隙中的百分比值会在 CSS 网格中造成溢出？

Question

我想要这样的网格：

.grid{
  display:grid;
grid-gap:50%;
  background-color:blue;
}
.grid-1{
  background-color:red;
}

<div class="grid">
 <div class="grid-1">
  test
 </div>
 <div class="grid-1">
  test
 </div>
 <div class="grid-1">
  test
 </div>
</div>

我认为这是一个非常大的问题，因为所有浏览器都不能正确理解百分比值。

如何解决？

Answer 1

最初，我们无法解析网格间隙的百分比，因为它取决于高度，所以我们忽略它（我们认为它是 auto）。浏览器首先考虑这样的内容计算高度：

console.log(document.querySelector('.grid').offsetHeight)

.grid {
  display: grid;
  background-color: blue;
}

.grid-1 {
  background-color: red;
  opacity:0.5;
}

<div class="grid">
  <div class="grid-1">
    test
  </div>
  <div class="grid-1">
    test
  </div>
  <div class="grid-1">
    test
  </div>
</div>

此高度用作计算间隙的参考，然后我们将其添加到高度（我们用来根据内容查找间隙的高度）。这不会再次触发网格的高度计算，因为它会创建一个循环并产生无限循环，因此浏览器将停在这里，我们将有一个 overflow.

console.log(document.querySelector('.grid').offsetHeight)

console.log(document.querySelector('.grid-1:nth-child(2)').offsetTop - document.querySelector('.grid-1:nth-child(1)').offsetTop - document.querySelector('.grid-1:nth-child(1)').offsetHeight)

.grid {
  display: grid;
  grid-gap:100%;
  background-color: blue;
  margin-top:50px;
}

.grid-1 {
  background-color: red;
  opacity:0.5;
  transform:translateY(-100%);
}

<div class="grid">
  <div class="grid-1">
    test
  </div>
  <div class="grid-1">
    test
  </div>
  <div class="grid-1">
    test
  </div>
</div>

如您所见，我使用了 100% 并添加了一些转换，可以看到间隙等于初始高度 （JS 代码也证实了这一点）.

一个简单的解决方法是避免使用百分比值并使用像素值，以便浏览器将它们包含在初始计算中。在所有情况下，使用百分比值都不好，因为您不知道 "percentage of what?"

.grid {
  display: grid;
  grid-gap:50px;
  background-color: blue;
  margin-top:50px;
}

.grid-1 {
  background-color: red;
  opacity:0.5;
}

<div class="grid">
  <div class="grid-1">
    test
  </div>
  <div class="grid-1">
    test
  </div>
  <div class="grid-1">
    test
  </div>
</div>

您可以参考官方规范以获取有关此行为的更多详细信息，但要遵循它并非易事：

https://www.w3.org/TR/css-sizing-3/#percentage-sizing

以下是更多示例，其中稍后计算百分比值并产生不需要的结果：

Why is my Grid element's height not being calculated correctly?

为什么网格间隙中的百分比值会在 CSS 网格中造成溢出？

Why percentage value within grid-gap create overflow in CSS grid?

css

percentage

css-grid