为什么网格间隙内的百分比值会在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>

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

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代码也证实了这一点(。

一个简单的解决方案是避免使用百分比值并使用像素值，以便浏览器将它们包括在初始计算中。在所有情况下，使用百分比值是不好的情况，因为你不知道"百分比是什么？">

.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-尺寸

---

以下是稍后评估百分比值并产生不需要的结果的更多示例：

为什么我的网格元素'；s的身高计算不正确？

CSS网格-不必要的分词

为什么百分比填充会破坏我的弹性项目？