在 Firefox 和 Chrome 中正确实现 CSS Grid

Question

正如此处总结的那样，CSS Grid 通过使用grid-auto-rows: 1fr 。 但是，Chrome 和 Firefox 在等高行之间插入高度设置为 auto 的行时表现出不同的行为。 也就是说，当使用显式的grid-auto-rows: auto 1fr 1fr 1fr语法时，Chrome 实现grid-auto-rows: auto 1fr 1fr 1fr高度相等，但在使用像grid-auto-rows: auto repeat(3, 1fr);这样的repeat时，每行的高度仅相等grid-auto-rows: auto repeat(3, 1fr); 而 Firefox 无论如何只能在每行的基础上实现相同的高度。

请在 Firefox 和 Chrome 中注意以下几点：

https://codepen.io/Hlsg/pen/eemRmm

https://codepen.io/Hlsg/pen/jGWQwM

有趣的是，他们在这个实现中的行为都是一样的，所以我认为这更多地与他们的css repeat实现有关：

https://codepen.io/Hlsg/pen/VWKPzq

您对此有何看法，您认为哪种浏览器具有正确的标准方法？

Answer 1

有趣的是，他们在这个实现中的行为都是一样的，所以我认为这更多地与他们的 css repeat实现有关。

我认为你是对的。

如果您查看grid-auto-rows和grid-auto-columns的规范定义，则repeat()表示法似乎不是可接受的值。

定义说只有轨道大小是可接受的值。 并且“轨道大小”的定义不包括repeat() 。

因此，违反规范，或者至少，规范语言不明确，可能会导致不同的浏览器实现。

https://www.w3.org/TR/css3-grid-layout/#auto-tracks