An approach for creating masonry layouts in vanilla CSS is one of those “holy grail” aspirations. I actually tend to plop masonry and the classic “Holy Grail” layout in the same general era of web design. They’re different types of layouts, of course, but the Holy Grail was a done deal when we got CSS Grid. By Geoff Graham.
That leaves masonry as perhaps the last standing layout from the CSS 3 era that is left without a baked-in solution. I might argue that masonry is no longer en vogue so to speak, but there clearly are use cases for packing items with varying sizes into columns based on available space. And masonry is still very much in the wild.
The article explains:
- What is masonry layout?
- Examples, please?
- There are two competing proposals
- The case for merging masonry and grid
- The case for keeping masonry separate from grid
There are two competing proposals for CSS masonry at the time of writing and many opinions are flying around advocating one or the other. Both proposals have merits and come with potential challenges — it’s a matter of what you prioritize which, in this case, I believe is a choice between leveraging existing CSS layout features and the ergonomics of a fresh new approach. Interesting read!
[Read More]