finds.dev← search

// the find

desandro/colcade

★ 504 · HTML · updated Mar 2020

Lightweight masonry layout

Colcade is a minimal masonry layout library that works by physically moving DOM elements into pre-declared column divs, then relying on native CSS for sizing and responsive behavior. It's a deliberate trade-off: less code and no dependency on imagesLoaded, but you give up spanning items, stamps, and transitions. Built by David DeSandro, who also built Masonry, so the trade-offs are stated honestly.

The approach of using real CSS columns means responsive behavior is just media queries showing/hiding column divs — no JS recalculation on resize. No imagesLoaded dependency because the column heights are just normal document flow. Single file with zero runtime dependencies at about 1/8 the size of Masonry. The README is unusually honest: it lists exactly what you lose compared to Masonry, in a table, with ASCII art.

Last commit was 2020 and the project shows no signs of maintenance — bower.json is still in the root, which dates it. No multi-column-spanning support is a real constraint that will bite anyone trying to feature a hero card in a grid. The column-moving approach means your DOM order no longer matches visual order, which can confuse screen readers. At 504 stars and 19 forks in six years, this never got wide adoption, so you're mostly on your own if something breaks.

View on GitHub →

// 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 →