为什么grid-gap中的百分比值会在CSS网格中造成溢出? [英] Why percentage value within grid-gap create overflow in CSS grid?

问题描述

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

I'd like to have a grid like this:

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

我认为这是一个很大的问题，因为所有浏览器都无法正确理解百分比值.

I think it's a really big problem beacuse all browser doesn't correctly understand percentage values.

该如何解决?

推荐答案

最初，我们无法解析网格间距的百分比，因为它取决于高度，因此我们将其忽略(我们将其视为auto).浏览器首先考虑这样的内容来计算高度:

Initially, we cannot resolve the percentage of the grid-gap since it depends on the height so we ignore it (we consider it as auto). The browser is first calculating the height considering content like this:

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>

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

This height is used as reference to calculate the gap then we added it to the height (the one we used to find the gap that is based on the content). This will not trigger the height calculation of the grid again because it will create a cycle and will have an infinite loop thus the browser will stop here and we will have an 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代码也确认了这一点).

As you can see, I used 100% and added some transfomation to see that the gap is equal to the initial height (the JS code also confirm this).

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

A trivial fix is to avoid percentage values and use pixel values so that the browser will include them in the initial calculation. In all the cases, using percentage value isn't good is such situation as you don't know "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>

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

You can refer to the official specification to get more details about this behavior but it won't be trivial to follow:

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

还有更多示例，这些示例稍后会评估百分比值并产生不想要的结果:

Here is more examples where percentage values are evaluated later and create unwanted results:

为什么我的Grid元素的高度计算不正确?

CSS网格-不必要的断字

为什么填充百分比会破坏我的弹性商品?

这篇关于为什么grid-gap中的百分比值会在CSS网格中造成溢出?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！