I still prefer the layout look from something like justifiedGallery.js where the heights of each row are the same. Actual masonry with stacking stones would never stack directly on top of each other like this. Calling it masonry just feels unnatural as anything stacked like that would easily be knocked over. "Lanes" is definitely more appropriately named than "masonry". The layout look of a justifiedGallery would be more masonry than the grid-template-rows:masonry setting. yeah yeah, raw css vs js library blah blah
One hack to almost get a justified gallery like that with no javascript is to lay them out with flexbox, setting their width to a percentage or vw value which your backend calculates based on image aspect ratio and desired image height, use flex-grow to stretch them to fill remaining space, and then using background-position: cover to make the images fit the slightly wrong aspect ratio containers.
This will of course slightly crop all your images to make it fit, but in practice as long as you keep your image aspect ratios reasonable and the images small enough on the page it's really quite subtle.
I had hoped that this feature would provide for masonry like that, but one has to make do.
What you’re looking for is described in the article as “bricks” (vs “waterfall”) and is also supported.
Not quite – “bricks” would have a jagged edge on the right side, while “justified gallery” libraries produce even rows of the same length (but slightly different height), e.g. https://justifiedgallery.com/ or https://miromannino.github.io/Justified-Gallery/