在Firefox和Chrome中正确实现CSS Grid [英] Correct implementation of CSS Grid in Firefox and Chrome

问题描述

此处得出的结论使用 grid-auto-rows：1fr 行。但是，当在高度相等的行之间插入自动设置高度的行时，Chrome和Firefox表现出不同的行为。也就是说，当使用显式的 grid-auto-rows时，Chrome在行之间达到相同的高度：自动1fr 1fr 1fr 1fr 语法，但在使用<$时，每行的高度仅相等c $ c> repeat 像 grid-auto-rows：auto repeat（3，1fr）; ，而Firefox在每行上只能达到相同的高度

As concluded here, CSS Grid implement equal height elements across rows by using grid-auto-rows: 1fr. However, Chrome and Firefox manifest different behaviours when inserting rows with a height set to auto between the equal height rows. That is, Chrome achieves equal height across rows when using the explicit grid-auto-rows: auto 1fr 1fr 1fr syntax but only equal height on a per row basis when using repeat like grid-auto-rows: auto repeat(3, 1fr); while Firefox only achieves equal height on a per row basis regardless.

请在Firefox和Chrome浏览器中均遵守以下规定：

Please observe the following in both Firefox and Chrome:

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

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

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

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

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

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

What's your take on this, and which browser do you think has the correct, standard aproach?

推荐答案

有趣的是，它们两者在此实现中的行为均相同，因此我认为这与其css repeat 的实现更多有关。

我认为您是正确的。

如果您查看 grid-auto的规格定义-行和网格自动列，不会出现 repeat（）表示法

If you look at the spec definition for grid-auto-rows and grid-auto-columns, the repeat() notation does not appear to be an acceptable value.

定义说，只有磁道尺寸是可接受的值。并且磁道大小的定义不包括 repeat（）。

The definition says that only track sizes are acceptable values. And the definition of "track size" does not include repeat().

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

So a violation of the spec or, at a minimum, unclear spec language, may lead to differing browser implementations.

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

这篇关于在Firefox和Chrome中正确实现CSS Grid的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！