html - 在 Firefox 和 Chrome 中正确实现 CSS Grid

Question

总结 here , CSS Grid 通过使用 grid-auto-rows: 1fr 实现跨行等高元素。但是，在等高行之间插入高度设置为自动的行时，Chrome 和 Firefox 表现出不同的行为。也就是说，当使用显式 grid-auto-rows: auto 1fr 1fr 1fr 语法时，Chrome 会在行间实现相等的高度，但在使用 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

Interestingly, they both behave the same with this implementation, so I'm thinking this is more to do with their implementation of css repeat.

我认为你是对的。

如果您查看 grid-auto-rows 和 grid-auto-columns 的规范定义，repeat() 符号确实似乎不是可接受的值。

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

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

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