There’s currently a very public debate at the W3C over the syntax for a new “Masonry” layout algorithm they’re standardizing. So I figured I’d throw my reasoned opinion into the ring!
First allow me to be clear on what my perspective is: I want more browser engines to exist, & for more varied ones to exist! I am looking at web standards from the perspective of a relatively novice implementor. If you’re not interested in this perspective, why are you reading our blog?
You may expect that that I’d prefer display: masonry
as that’s perceived to be simpler, due to a naive understanding of how webpages are laid out. The truth is that display
already isn’t the only CSS property which decides how pages are laid out. In fact decisions over syntax like this have minimal impact over how they are implemented. Implementation complexity & performance are not a meaningful concern for chosing one syntax over the other!
What is a concern: Would an upstart browser engine feel obligated to implement Masonry layout? If we choose the grid-template-rows: collapse
syntax, no! They could just ignore that CSS property & get a similar layout in plain CSS Grid. Also having fewer CSS properties to parse appeals to me.
But I hear you asking: Can we expect such an upstart browser engine to support CSS Grid? Eventually, sure! It should be a safer bet than, say, Float! Despite all the measures put in place to make Grid ergonomic & resilient for webdevs, its easily the simplest layout algorithm CSS offers! With plenty of code that could be reused for laying out <table>
elements! Grid is not complex, it is merely new.
Personally I probably would implement Masonry layouts, since I’m tempted to use it! As a web developer I barely have an opinion one way or the other, I’m not convinced that either approach is easier to learn.