Content & display

Masonry Layout

Q: How do people describe a Masonry Layout in plain words?

Pinterest-style wall of cards with different heights images stacked in columns without aligning to a shared row two columns of uneven cards packed tight

Q: How do I implement a Masonry Layout?

Implement masonry for an image feed: equal-width variable-height cards packed into the shortest column. Don’t rely on CSS columns for reading order. Set aspect-ratio (or width/height) on images before load to prevent layout shift.

Equal-width, variable-height cards packed into columns with no shared row line.

Also known as Pinterest grid · waterfall layout · staggered grid

Demo · not production-ready code

Prompt for AI

Pick a stack, copy a ready prompt, paste into Cursor / Claude / ChatGPT.

Your stack

Shapes the prompt you copy

React + Tailwind + shadcn/ui · EN

Stack: React + Tailwind + shadcn/ui. Use React with Tailwind CSS and shadcn/ui patterns (Radix-based primitives, cn(), class-first styling).

Task: implement "Masonry Layout".

Implement masonry for an image feed: equal-width variable-height cards packed into the shortest column. Don’t rely on CSS columns for reading order. Set aspect-ratio (or width/height) on images before load to prevent layout shift.

Anatomy:
- column: Equal-width vertical tracks.
- item / brick: Equal width, free height.
- column height tracking: New item always joins the currently shortest column.

Preferred API / pattern: `masonic / react-masonry-css / custom shortest-column`

Keep scope minimal: only this UI pattern, match existing project style.

Acceptance checks

○Avoid: CSS columns with visual left-right expectation
○Avoid: Images without reserved size
○Avoid: Re-packing on every tiny resize without rAF
○Avoid: No empty/loading states for the feed.

In plain wordsHow people search for it

“Pinterest-style wall of cards with different heights”“images stacked in columns without aligning to a shared row”“two columns of uneven cards packed tight”

AnatomyOpen for part names

column: Equal-width vertical tracks.
item / brick: Equal width, free height.
column height tracking: New item always joins the currently shortest column.

How to write itOpen for stack patterns

Web (HTML/CSS)JS column packer / experimental grid masonry

React + Tailwind + shadcn/uimasonic / react-masonry-css / custom shortest-column

SwiftUIcustom LazyVGrid with measured heights

Ant Designno built-in; community or custom

Notes

CSS columns fill top-to-bottom per column, which wrecks reading and tab order for a visual left-right feed—use a shortest-column algorithm (or true grid masonry when available). Reserve aspect-ratio or height on media or CLS explodes. Infinite feeds pair with pull-to-refresh and virtualization carefully.

Common mistakesHumans and models trip here

CSS columns with visual left-right expectation: DOM/tab order is top-to-bottom per column.
Images without reserved size: every load reshuffles the wall (CLS).
Re-packing on every tiny resize without rAF: jank.
No empty/loading states for the feed.

More failure symptoms on AI broke it.

Related patterns

CardA contained surface grouping related content and actions as one unit.Bento GridOne strict grid with tiles of mixed spans—like a bento box filled edge to edge.Skeleton ScreenPlaceholder shapes that mirror upcoming content so loading feels structured, not empty.Aspect RatioReserve space at a fixed width-to-height ratio so media doesn’t shove the layout around when it loads.

Spotted a wrong name or missing pattern?

Message on X