Rachel Andrew introducing the fact that masonry layout is going to be a thing in native CSS via CSS grid layout. The thing with masonry is that we can already do it for the most part, but there is just one thing that makes it hard: doing the vertical-staggering and having a left-to-right source order. So that’s what this new ability will solve in addition to it just being less hacky in general.
You can already test a partial implementation in Firefox Nightly by enabling layout.css.grid-template-masonry-value.enabled.
.container {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: masonry;
}I like the grid-template-rows: masonry; syntax because I think it clearly communicates: “You aren’t setting these rows. In fact, there aren’t even really rows at all anymore, we’ll take care of that.” Which I guess means there are no rows to inherit in subgrid, which also makes sense.
I remember designers insisting on rounded corners when it required ridiculous amounts of additional html and/or rounding the corners of images…
Along came CSS border-radius and it was so easy. Perhaps it was coincidental with metro design, then iOS ditching rounded skeumorpism, but designers immediately lost interest in rounded corners.
If masonry layouts become so simple, I suspect the same will apply.
Ahhh… classic. Developers talking about design with no knowledge at all about it.
Border radius and masonry layout are just ways to represent ideas and Designers use them if it applies. It’s not about interest or trends, so… design decisions should be respected both implementation is hard or not.
Developers code, Designers design. Every role should respect each other.
Yes! And some do both.