Masonry Gallery Layout with CSS Columns (No JavaScript)

A Pinterest-style masonry gallery using only the CSS multi-column layout (columns: 3 220px) - no JavaScript, no masonry library, and no CSS Grid masonry value (which still isn't supported everywhere). break-inside: avoid keeps each card intact instead of splitting across columns, and the column count drops to 2 on narrow viewports via a single media query.

Category

Bootstrap 3.0
img binocular Views: 4
Creation date 2026
Author james

Associated Tags

masonry css columns masonry layout break-inside pure css no javascript no library gallery responsive design vanilla css

Related snippets :

Bootstrap 5 Gallery Viewer
Bootstrap 5 Gallery Viewer


animated card slider showcase
animated card slider showcase


Task List That Styles Itself with the CSS :has() Selector
Task List That Styles Itself with the CSS :has(...


Countdown Timer to a Target Date (Vanilla JavaScript)
Countdown Timer to a Target Date (Vanilla JavaS...