1

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?

Hlsg
  • 3,213
  • 2
  • 12
  • 17

1 Answers1

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

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
  • So you're saying that with `repeat` both browsers are operating out of spec, so none of them are right or wrong. So there wouldn't be any point in filing a bugreport with either. If that's teh case, I think you should update the thread mentioned in my OP as it's quite popular and this info can save alot of headaches. – Hlsg Oct 30 '17 at 22:29
  • My answer is based on my reading of the spec. I'm pretty sure I'm correct, but I'm not a spec writer or browser maker, so I may be misinterpreting key terms or syntax. I wouldn't go any further than my answer at this point, so I'll leave your post as-is for now. Maybe somebody else can shed some more light on this behavior. – Michael Benjamin Oct 30 '17 at 23:18