finds.dev← search

// the find

desandro/masonry

★ 16,712 · HTML · updated Jun 2024

:love_hotel: Cascading grid layout plugin

Masonry is a JavaScript grid layout library that packs elements into columns based on available vertical space — the Pinterest-style waterfall layout. It's been around since 2011 and is the canonical solution for this problem. If you need this layout, this is the one you reach for.

- Zero-dependency core — the vanilla JS API works without jQuery, even though jQuery support is still there for legacy codebases

- Three initialization paths (JS, jQuery, HTML data attribute) means you can drop it into almost any setup without restructuring

- 16k stars and 900 closed issues over 13 years means the edge cases (RTL, stamps, dynamic item addition) are actually handled and documented

- Small and self-contained — the pkgd bundle is a single file with no runtime surprises

- No ESM export — in 2024 you're still shipping a UMD bundle or using a bundler shim, which is annoying for modern setups

- Layout is column-based only, not true 2D bin-packing — you can get large gaps if items have very uneven heights and the column count isn't right

- Last meaningful commit was 2024 and the repo shows clear maintenance-mode signs (Bower still in the README, Gulp build tooling from 2014); it works, but don't expect active development

- CSS Grid can do most of what Masonry does now — `grid-template-rows: masonry` is in Firefox behind a flag — so this library is increasingly solving a problem the platform is absorbing

View on GitHub → Homepage ↗

// want more like this?

We dig through GitHub every week and send a few repos picked for what you actually care about — each with an honest take like this one.

Get finds in your inbox → Search again →