Question

请注意，以下问题可以通过使用fr单位而不是％和auto来解决，但我想寻找一个解释为什么问题首先出现的原因。

在下面的代码中，

Firefox ：不遵守grid-template-rows的值。将相等的高度应用于每行，但网格项目不会溢出容器。

Chrome ：似乎服从grid-template-rows属性，但是网格项使容器溢出。

最初，我认为问题出在％上，但这是该行允许的单位。我将 auto 值换成 10％，但这产生了自己的问题。

我查看了文档，但是缺少一些内容。

有人有直接的解释吗？

body {
  margin: 40px;
}

.wrapper {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: 30% 30% 30%;
  grid-template-rows: 30% auto 60%;
  background-color: #f00;
  color: #444;
}

.box {
  background-color: #444;
  color: #fff;
  border-radius: 5px;
  padding: 20px;
}

<div class="wrapper">
  <div class="box">A</div>
  <div class="box">B</div>
  <div class="box">C</div>
  <div class="box">D</div>
  <div class="box">E</div>
  <div class="box">F</div>
  <div class="box">G</div>
  <div class="box">H</div>
  <div class="box">I</div>
</div>

Codepen

Answer 1

最初，我认为问题出在％上，但这是一个允许的单位排。我将 auto 值换成 10％，但创建了本身的问题。有人有直接的解释吗？

问题实际上是使用%个单位。

简单的解释是，当父容器上没有定义或继承的长度时，在浏览器中对百分比长度的处理会有所不同。

因此，由于网格容器没有定义的高度，因此浏览器将不一致地渲染用百分比定义的行高。

这些变化将在以下帖子中详细探讨：

简单的解决方案是定义容器上的高度。在下面的示例中，我将height: 300px添加到了.wrapper中。现在，这些行在浏览器之间呈现相同的内容。

.wrapper {
  height: 300px; /* new */
  display: grid;
  grid-gap: 10px;
  grid-template-columns: 30% 30% 30%;
  grid-template-rows: 30% auto 60%;
  background-color: #f00;
  color: #444;
}

.box {
  background-color: lightblue;
  color: #fff;
  border-radius: 5px;
  padding: 20px;
}

<div class="wrapper">
  <div class="box">A</div>
  <div class="box">B</div>
  <div class="box">C</div>
  <div class="box">D</div>
  <div class="box">E</div>
  <div class="box">F</div>
  <div class="box">G</div>
  <div class="box">H</div>
  <div class="box">I</div>
</div>

Answer 2

Chrome：似乎服从grid-template-rows属性，但网格物品溢出了容器。

我想说chrome正在做一个努力，因为计算有些复杂，而且我们有一个周期。基本上需要解决百分比值，并且最初（由于未定义高度）浏览器无法解析grid-template-rows的值，因此浏览器将首先根据其内容计算包装器的高度（忽略grid-template-rows ），我们将获得如下内容：

console.log(document.querySelector('.wrapper').offsetHeight);

body {
  margin: 40px;
}

.wrapper {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: 30% 30% 30%;
  /*grid-template-rows: 30% auto 60%;*/
  background-color: #f00;
  color: #444;
}

.box {
  background-color: #444;
  color: #fff;
  border-radius: 5px;
  padding: 20px;
}

<div class="wrapper">
  <div class="box">A</div>
  <div class="box">B</div>
  <div class="box">C</div>
  <div class="box">D</div>
  <div class="box">E</div>
  <div class="box">F</div>
  <div class="box">G</div>
  <div class="box">H</div>
  <div class="box">I</div>
</div>

这是Firefox停止运行的步骤，但是chrome会尝试做更多的事情！注意我们获得的高度值（194px）。现在我们可以根据该值解析百分比值，您将获得以下信息：

console.log(document.querySelector('.wrapper').offsetHeight);
console.log(document.querySelector('.box:first-child').offsetHeight);
console.log(document.querySelector('.box:last-child').offsetHeight);

body {
  margin: 40px;
}

.wrapper {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: 30% 30% 30%;
  grid-template-rows: 30% auto 60%;
  background-color: #f00;
  color: #444;
}

.box {
  background-color: #444;
  color: #fff;
  border-radius: 5px;
  padding: 20px;
}

<div class="wrapper">
  <div class="box">A</div>
  <div class="box">B</div>
  <div class="box">C</div>
  <div class="box">D</div>
  <div class="box">E</div>
  <div class="box">F</div>
  <div class="box">G</div>
  <div class="box">H</div>
  <div class="box">I</div>
</div>

请注意第一元素（第一行）的高度等于58px（0.3 * 194px），最后一个子元素（最后一行）的高度等于{{1 }}（117px）。从逻辑上讲，第二行应具有0.6 * 194px的高度，这不够，因此它将具有较大的高度，从而导致溢出。

溢出实际上不是问题，而是此 complex 计算的副作用，除非您为每行定义的百分比值小于（194px - 58px - 117px - 20px(gap) = -1

100% - 20px/3 = 33.33% - 6.67px

console.log(document.querySelector('.wrapper').offsetHeight);
console.log(document.querySelector('.box:first-child').offsetHeight);
console.log(document.querySelector('.box:last-child').offsetHeight);

body {
  margin: 40px;
}

.wrapper {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: 30% 30% 30%;
  grid-template-rows: 20% 20% 20%;
  background-color: #f00;
  color: #444;
}

.box {
  background-color: #444;
  color: #fff;
  border-radius: 5px;
  padding: 20px;
}

另外，由于<div class="wrapper"> <div class="box">A</div> <div class="box">B</div> <div class="box">C</div> <div class="box">D</div> <div class="box">E</div> <div class="box">F</div> <div class="box">G</div> <div class="box">H</div> <div class="box">I</div> </div>是基于它定义的，因此我们将有一个循环，浏览器将无法通过增加包装器的高度来解决此问题。

Chrome / Firefox在CSS Grid中的百分比高度差异

2 个答案: