在 Firefox 和 Chrome 中正确实现 CSS Grid答案

【问题标题】：Correct implementation of CSS Grid in Firefox and Chrome在 Firefox 和 Chrome 中正确实现 CSS Grid
【发布时间】：2018-04-11 08:10:17
【问题描述】：

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

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

【问题讨论】：

标签： html css google-chrome firefox css-grid

【解决方案1】：

有趣的是，它们在此实现中的行为相同，所以我认为这更多地与它们对 css repeat 的实现有关。

我认为你是对的。

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

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

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

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

【讨论】：

所以你是说repeat 两个浏览器都运行不规范，所以它们都没有对错。因此，向其中任何一个提交错误报告都没有任何意义。如果是这种情况，我认为您应该更新我的 OP 中提到的线程，因为它很受欢迎，并且此信息可以省去很多麻烦。
我的回答是基于我对规范的阅读。我很确定我是正确的，但我不是规范编写者或浏览器制造商，所以我可能会误解关键术语或语法。在这一点上，我不会比我的回答更进一步，所以我暂时保留你的帖子。也许其他人可以对这种行为有更多的了解。