为什么grid-gap中的百分比值会在CSS网格中造成溢出？

  • Z时代
  • 2024-01-10
  • 分类：问答

我想要一个像这样的网格：

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

以上是 为什么grid-gap中的百分比值会在CSS网格中造成溢出？ 的全部内容， 来源链接： utcz.com/qa/426676.html

回到顶部