It’s going to be a long time until CSS masonry is ready for us to use in our projects so I’ve got a nice stop-gap here for you that uses composable layouts.

Piccalilli's resource offers insights, tutorials, and resources for frontend developers and web designers. Readers can learn about HTML, CSS, and JavaScript techniques, as well as design principles and accessibility. With articles, tutorials, and design showcases, Piccalilli provides  guidance and inspiration for creating modern and accessible web experiences.

Piccalilli

A detailed guide on creating a masonry-like layout using composable methods in HTML and CSS. The post explains the masonry layout concept, its history with JavaScript, and how browser support issues for CSS masonry prompted a flexible workaround. Step-by-step code examples demonstrate how to use the switcher and flow layouts to approximate masonry effects, ensuring configurability and responsiveness.

A simple masonry-like composable layout

Had a quick look at this and masonry didn’t require you to delgate into columns - it created the columns for you.

I commend the use of variables for smart stacking but this just felt like a “columns: 3” layout with extra steps…
Real masonry requires elements to be in the same grid and ordered in reading order.
IMHO firefox’s API usage of the grid-template-rows rule is a no brainer… just hope the working group settles on a method soon because a native masonry layout is long due.