Chrome和Firefox中的CSS网格行为不同 [英] CSS grid behaviour different in Chrome and Firefox

问题描述

我有2列3行的CSS网格。由于有角度的ngif子句，第三行内容并不总是存在。在第一列中存在一个图像，该图像跨越三行。综上所述，我在Chrome（80.0.3987.87，这是我发布的最新稳定版）和Firefox中得到2个不同的结果。

有没有一种方法可以控制这些行，使其行为类似于Firefox，即当图像高度大于两个第一行高度的总和时，第三行会增长。

  .grid {width：400px;显示：网格； grid-template-columns：40px 1fr; grid-template-rows：minmax（0，auto）minmax（0，auto）minmax（0，1fr）;}。image {width：40px;高度：100px;网格列：1；网格行：1 /跨度3; background-color：＃f00;}。text1 {grid-column：2; grid-row：1;}。text2 {grid-column：2; grid-row：2;}  

 < div class = 网格> < div class = image>< / div> < div class = text1>文本1< / div> < div class = text2>文本2< / div>< / div>  

这是

如您所见，Chrome会平均增加第1行和第2行的高度（第3行保持为0）。 Firefox仅增加row2的高度，即最后包含内容的可见行。

请注意，我尝试将grid-template-rows设置为 minmax（0，auto）minmax （0，自动）为1fr，但是第3行将具有一个怪异的高度，使网格高度大于其内容。

更新 ：啊！能够在以前的Chrome版本（79）上试用，这次得到的结果与Firefox中的结果相同。看来80改变了它。

解决方案

您可以像下面这样更新代码。在Chrome 80和Firefox中，它的工作方式似乎相同。值得注意的是 1fr 等于 minmax（auto，1fr）确实与 minmax（0,1fr），但仍然不确切知道是什么使两者的行为有所不同。

  .grid {width：400px;显示：网格； grid-template-columns：40px 1fr; grid-template-rows：auto auto 1fr;}。image {width：40px;高度：100px;网格列：1；网格行：1 /跨度3; background-color：＃f00;}。text1 {grid-column：2; grid-row：1;}。text2 {grid-column：2; grid-row：2;}  

 < div class = 网格> < div class = image>< / div> < div class = text1>文本1< / div> < div class = text2>文本2< / div>< / div>  

I have a css grid with 2 columns and 3 rows. The third row content is not always present because of an angular ngif clause. An image is present in the first column that spans the 3 rows. With all that said, I get 2 different results in Chrome (80.0.3987.87, which is the latest stable as I post) and Firefox.

Is there a way to control the rows so that it behaves like in Firefox, i.e. the third row grows when the image height is bigger than the 2 first row heights combined.

.grid {
  width:400px;
  display:grid;
  grid-template-columns: 40px 1fr;
  grid-template-rows: minmax(0, auto) minmax(0, auto) minmax(0, 1fr);
}

.image {
  width:40px;
  height:100px;
  grid-column:1;
  grid-row:1 / span 3;
  background-color: #f00;
}

.text1 {
  grid-column:2;
  grid-row:1;
}

.text2 {
  grid-column:2;
  grid-row:2;
}

<div class="grid">
  <div class="image"></div>
  <div class="text1">Text 1</div>
  <div class="text2">Text 2</div>
</div>

Here is the codepen that you can check in both Chrome and Firefox.

And here is an image to show the difference:

As you can see, Chrome increases equally the height of rows 1 and 2 (row 3 stays 0). Firefox increases only the height of row2, i.e. the last visible row with content.

Note that I tried setting grid-template-rows as "minmax(0, auto) minmax(0, auto) 1fr", but then row 3 will have a weird height that makes the grid height bigger than its content.

Update: Ah! Was able to try it on a previous Chrome version (79) and I get the same result as in Firefox this time. So it seems 80 changed it. Can some people here confirm?

解决方案

You can update your code like below. It seems to work the same in Chrome 80 and firefox. Worth to note that 1fr is equal to minmax(auto, 1fr) which is indeed different from minmax(0,1fr) but still don't know exactly what makes both behave differently.

.grid {
  width:400px;
  display:grid;
  grid-template-columns: 40px 1fr;
  grid-template-rows: auto auto 1fr;
}

.image {
  width:40px;
  height:100px;
  grid-column:1;
  grid-row:1 / span 3;
  background-color: #f00;
}

.text1 {
  grid-column:2;
  grid-row:1;
}

.text2 {
  grid-column:2;
  grid-row:2;
}

<div class="grid">
  <div class="image"></div>
  <div class="text1">Text 1</div>
  <div class="text2">Text 2</div>
</div>

这篇关于Chrome和Firefox中的CSS网格行为不同的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！