最初,我们无法解析网格间隙的百分比,因为它取决于高度,因此我们将其忽略(我们将其视为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>