Choosing a gallery
Five ways to arrange a collection. Picking the right one matters more than tuning the one you picked.
Live example
Try the interaction before reading the recipe.
real component · keyboard-safe
Overview
Focused item
Choosing a gallery · selection stays explicit
Five ways to arrange a collection. Picking the right one matters more than tuning the one you picked.
Decision order
- Volume and mixed heights → Masonry Gallery
- Expressive, personal, editorial → Polaroid Wall
- A small set that should unpack from one place → Stack to Grid
- A hand of a few options → Card Fan
- One at a time, reviewed and dismissed → Draggable Card Stack
In one line each
- Masonry Gallery — content density and mixed ratios. No motion of its own, which is what makes it safe at a hundred items.
- Polaroid Wall — expressive, editorial presentation. Six to twenty-four photos that should feel pinned rather than placed.
- Stack to Grid — reveals that a small collection has more inside it.
- Card Fan — a few options presented as a hand; overlap is the point.
- Draggable Card Stack — sequential review, where dismissal is the action.
The question that settles most cases
*Is the arrangement carrying meaning, or is it carrying volume?*
Meaning — a curated set, a story, a personality — justifies an expressive layout. Volume does not: at scale, arrangement should get out of the way and let the content be the interest.
Common mistakes
- Reaching for Polaroid Wall on a product grid. Rotation destroys the comparability that a product grid exists for.
- Using Card Fan for content people need to read. Overlap hides text.
- Putting a heavy card component inside a large gallery. See image-heavy-performance.
Source: packages/skills/patterns/gallery-selection.md