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

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


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


Scroll-Driven Animations with CSS animation-timeline (No JS Library)
Scroll-Driven Animations with CSS animation-tim...


React Modal with createPortal via CDN (No Build Step)
React Modal with createPortal via CDN (No Build...