Chris’ Corner: Browser Wars Micro Edition

Ages ago, Firefox shipped “masonry layout” where you simply grid-template-rows: masonry; instead of defining specific rows in a grid or letting them auto-create. It wasn’t terribly powerful but it did the trick for a lot of use cases.

There has been renewed interest in this the past year or so, where Google and Apple have competing ideas on how to do this style of layout better.

Google-folk think display: masonry; is best, with a bunch of other properties controlling how it works. They’ve now shipped that behind a flag, so I think we know where their head is at.

Apple-folk think we could keep it in display: grid; but introduce “Item Flow” properties, including one called item-pack which would accomplish the layout and perhaps open the door for other useful behaviors across layout styles.

Three browsers, three different situations, including shipped implementations.

Let’s hope this shakes out cleanly.