在 Firefox 和 Chrome 中正确实现 CSS Grid

Question

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.

Please observe the following in both Firefox and Chrome:

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

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

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

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

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 .

I think you're correct.

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.

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