在Firefox和Chrome中正确实现CSS Grid

时间:2017-10-30 11:04:15

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

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

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

1 个答案:

答案 0 :(得分:1)

  

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

我认为你是对的。

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

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

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

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