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: 192
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 :

animated card slider showcase
animated card slider showcase


Container Queries: A Card That Adapts to Its Container, Not the Viewport (No JavaScript)
Container Queries: A Card That Adapts to Its Co...


baguette box.js examples
baguette box.js examples


Command Palette (⌘K) with Native <dialog>, No Library
Command Palette (⌘K) with Native , No L...