Open any "masonry" npm package's GitHub issues and you'll find the same complaint, filed every few months in different words: items jump on resize, SSR renders everything in one column until JS hydrates, and the bundle is 15–40KB for something that is, conceptually, "pack boxes into the shortest column." It's a layout problem. It has needed a JavaScript library to solve because CSS Grid — for all its power — has never been able to do it. Every row in a CSS grid has to be the same height across every column. A masonry layout is defined by not having that constraint.

So most teams land on one of two compromises. Neither is actually masonry.

The fix everyone reaches for first

The CSS-only version looks like this, and it's seductive because it needs zero JavaScript:

.gallery { columns : 3 ; column-gap : 16px ; }

.gallery > * { break-inside : avoid ; margin-bottom : 16px ; }

Enter fullscreen mode

Exit fullscreen mode

It renders a Pinterest-ish grid.…