MasonryFlow
HeroLive DemoAnatomyComponentsInteractionsRules
StyleKit
Pinterest-style Layout

Content flows
naturally.

CSS columns technique creates a self-organizing grid where cards of varying heights fill each column top-to-bottom. Zero JavaScript, pure CSS masonry that works in every browser.

columns-4
break-inside-avoidvarying heights — natural flow
No JS
CSS only
gap-4
Column gap
1-4 cols
Responsive
Live Demo

Masonry grid in action

Filter by category and watch the grid reflow. Each card has a different aspect ratio — that is the whole point of masonry. Hover to reveal the overlay actions.

Photos

Golden Hour

Nature Photography

Art

Digital Dream

Illustration

Design

Minimal Form

UI Design

Photos

Urban Layers

Street Photography

Art

Void Walker

Concept Art

Design

Flow State

Brand Identity

Photos

Morning Mist

Landscape

Art

Neon Bloom

Digital Painting

Design

Grid System

Layout Study

Photos

Night Sky

Astrophotography

Art

Pixel World

Pixel Art

Design

Type Study

Typography

Layout Anatomy

How CSS columns masonry works

No JavaScript. No layout library. Just three CSS properties and a responsive column count.

masonry-grid.tsx
<div className="
columns-2
md:columns-3
lg:columns-4
gap-4
">
<div className="
break-inside-avoid
mb-4
group overflow-hidden
hover:-translate-y-1
transition-all duration-300
">
<div className="relative overflow-hidden">
group-hover:scale-105
duration-700 ease-out
</div>

Responsive column count

Mobile< 640pxcolumns-1
Tablet640–1024pxsm:columns-2
Desktop1024–1280pxlg:columns-3
Wide1280px+xl:columns-4

Card structure rules

break-inside-avoid

Prevents card split across columns

mb-4 (not gap)

Column gap handled with margin-bottom

overflow-hidden on container

Required for Confined Zoom

width: 100% of column

Cards never set explicit width

height: auto

Let content determine height

~
aspect-ratio on images

Prevents layout shift

Why not CSS Grid masonry?

grid-template-rows: masonry is a draft spec requiring browser flags. CSS columns is universally supported with zero polyfills or JavaScript bridges needed.

Component Gallery

Card varieties

Every card type follows the same masonry rules — break-inside-avoid, overflow-hidden for Confined Zoom, and overlay-reveal actions on hover.

Photo cards — Confined Zoom + Overlay Reveal

Photo

Portrait

Art

Square Shot

Nature

Vertical

Travel

Landscape

Interactions

Animation rules demo

Four named interaction patterns from the masonry-flow aiRules. Hover or interact with each card to feel the exact specified behavior.

Confined Zoom

group-hover:scale-105 duration-700

Image scales inside overflow-hidden — never breaks container boundary

Hover to see scale contained within border

Subtle Elevation

hover:-translate-y-1 + diffused shadow

Max 4px lift. Soft diffused shadow, never a hard border ring.

Hover me

Hover to float with diffused shadow

Overlay Reveal

opacity + translate — card size unchanged

Overlay and buttons slide in. Card never resizes or shifts layout.

Hover to reveal overlay without resizing card

Action Snappiness

duration-200 on filter/category buttons

Top filters respond in 200ms — feels instant, never laggy.

Click to switch — feel the instant 200ms feedback

Active: All transition: 200ms

Compare: card hover uses 300ms — only filters use 200ms for snappy feel.

Design Rules

Do and Don't

Every rule in the masonry-flow style definition distilled into actionable guidance. These constraints enforce visual consistency across all generated UIs.

Do

  • Use CSS columns: columns-2 md:columns-3 lg:columns-4
  • Apply break-inside-avoid to every masonry card
  • Keep column gap consistent with gap-4
  • Use overflow-hidden on image container for Confined Zoom
  • Set group-hover:scale-105 duration-700 inside overflow-hidden
  • Limit hover lift to -translate-y-1 (4px max)
  • Use diffused shadow for hover feedback — no hard borders
  • Reveal overlays with opacity + translate — never resize card
  • Use duration-200 on filter and category buttons
  • Reduce to columns-1 on mobile (below 640px)
  • Add varying aspect ratios across cards for visual rhythm
  • Use consistent mb-4 between cards within columns

Don't

  • Force all cards equal height — defeats the purpose entirely
  • Use inconsistent card widths within the masonry grid
  • Use inconsistent column gaps or irregular spacing
  • Let image scale break out of overflow-hidden boundary
  • Exceed -translate-y-1 on hover — disrupts visual flow
  • Use hard border rings as focus feedback (use shadow instead)
  • Resize the card on hover — only overlay reveals, card stays
  • Use duration-300+ on filter buttons (must feel instant)
  • Use more than 2 columns on screens below 640px
  • Skip loading states for real images in production
  • Mix gap-4 and gap-6 inconsistently — pick one globally
  • Use CSS Grid instead — columns is the correct technique

Confined Zoom

group-hover:scale-105 duration-700

Always inside overflow-hidden

Subtle Elevation

hover:-translate-y-1 diffused shadow

Max 4px, no hard borders

Overlay Reveal

opacity + translate card size locked

Content floats in, card stays

Action Snappiness

duration-200 filters only

Instant category feedback

MasonryFlow

Pinterest-style masonry layout using CSS columns. Varying card heights, confined zoom, overlay reveals — all in pure CSS.

StyleDocumentationShowcaseCover
StyleKitHomeAll Styles
PaletteDeep NavyCrimson RedTeal GreenGolden YellowViolet Purple
Masonry Flow for StyleKit
Back to StyleKit