Correct Implementation Of Css Grid In Firefox And Chrome

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

Solution 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