我想要这样的网格:
.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>
我认为这是一个非常大的问题,因为所有浏览器都不能正确理解百分比值。
如何解决?
最佳答案
最初,我们无法解析网格间隙的百分比,因为它取决于高度,所以我们忽略它(我们将其视为 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-sizing
以下是更多示例,其中稍后计算百分比值并产生不需要的结果:
Why is my Grid element's height not being calculated correctly?
关于css - 为什么网格间隙中的百分比值会在 CSS 网格中造成溢出?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58667241/