CSS网格在Chrome和Firefox中的表现不同。

Question

我有一个带有2列和3行的CSS网格。由于使用了Angular ngif子句，第三行内容并不总是存在。一张跨越了前3行的图片出现在第一列中。尽管如此，在Chrome（80.0.3987.87，这是我发布时的最新稳定版）和Firefox中会得到2个不同的结果。

是否有一种方法可以控制行为，使其像Firefox一样，即当图像高度大于前两行高度之和时，第三行会增长。

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

这里是可以在Chrome和Firefox中检查的codepen。

下面是一张图片以展示差异:

如您所见，Chrome等比例地增加了行1和2的高度（行3保持为0），而Firefox仅增加了最后一个可见内容行即第二行的高度。

请注意，我尝试将grid-template-rows设置为 "minmax(0, auto) minmax(0, auto) 1fr"，但是这时第三行会有奇怪的高度，使得网格的高度大于其内容。

更新: 啊！我能够在之前的Chrome版本（79）上尝试，这次我获得了与Firefox相同的结果。因此似乎80做了改变，这里有一些人能够确认吗？

- Nicolas Cadilhac

---

我在我的Chrome浏览器上看到了Firefox的结果，你能添加你的版本吗？ - Temani Afif

grid-template-rows: minmax(0, auto) minmax(0, auto) 1fr; 看起来可以解决这个问题。 - Paulie_D

@Paulie_D 不是的，请看我在底部更新的帖子。 - Nicolas Cadilhac

@DamienVassart 我在Chrome中禁用了所有扩展程序，但仍然得到相同的结果。 - Nicolas Cadilhac

@NicolasCadilhac 我把我的Chrome更新到80版本，现在我看到了不同。 - aloisdg

Answer 1

你可以按照以下方式更新你的代码。在Chrome 80和Firefox中似乎都能正常工作。值得注意的是，1fr等同于minmax(auto, 1fr)，这确实不同于minmax(0,1fr)，但仍然不知道是什么使两者表现不同。

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

- Temani Afif

Answer 2

你提到的容器的grid-template-rows方式在Chrome中是无效的。我猜这就是问题所在。

尝试使用以下CSS：

<style>
.grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}

.image {
    height: 100px;
    grid-row: 1/4;
    background-color: #f00;
}

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

.text2 {
    grid-column: 2;
    grid-row: 2;
}
</style>

希望这能有所帮助！

- Nithin Suresh

---

你能解释一下在Chrome中什么是无效的并给出一个参考吗？ - Nicolas Cadilhac

请注意，这并没有帮助。一旦我明确添加第三行，就好像所有行都是1fr一样。因此，我需要grid-template-rows定义。 - Nicolas Cadilhac

我认为在这种情况下，您必须使用grid-column指定CSS类到2，以便无论添加什么新项目都会自动进入第二列。 - Nithin Suresh