Masonry Gallery
Responsive columns for content of mixed heights, stable from first paint.
- galleries
- masonry
- columns
- photos
- density
Quiet study Open table Field notes A small room Blue hour Soft archive After rain Last light
Usage
import { MasonryGallery } from "@pinky-ui/layouts";
<MasonryGallery
columns={{ mobile: 2, tablet: 3, desktop: 4 }}
gap={16}
>
{items}
</MasonryGallery>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| columns | ResponsiveColumns | number | { mobile: 2, tablet: 3, desktop: 4 } | Column count per breakpoint. |
| gap | number | 16 | Gap in px. |
| label | string | — | Accessible name for the list. |
Accessibility
- Renders a list; items keep their own semantics.
- Round-robin distribution keeps visual order close to DOM order.
- No motion of its own, so it is safe at any size.
Performance
- No measurement, no reflow after images load, no layout shift.
- The layout adds zero listeners — cost is whatever you put inside it.
- Use `loading="lazy"` and explicit dimensions on images.
Reduced motion
Nothing to reduce — the layout itself does not animate.
When to use
- Photo galleries with mixed aspect ratios
- Content walls, blog indexes, moodboards
- Any collection large enough that per-item motion would be noise
When not to use
- Content that must be read in strict order across columns
- Small sets of three or four items, where a plain grid is clearer
Skill
Purpose
Responsive columns for content of mixed heights. The workhorse of the family: the one layout here built for volume rather than for expression.
Good for
- photo galleries with mixed aspect ratios
- content walls, blog indexes, moodboards
- any collection large enough that per-item motion would be noise
Avoid for
- content that must be read in strict order across columns
- small sets of three or four, where a plain grid is clearer
How many items
Twelve to several hundred.
Mobile
Two columns by default; one column is often better for tall content. The column count resolves from the mobile value first, so a phone never renders a desktop arrangement and then undoes it.
Motion intensity
None. The layout does not animate, deliberately. Whatever you put in the columns brings its own motion — and with a hundred items, the correct amount is usually very little.
Accessibility
- Renders a list; items keep their own semantics.
- Round-robin distribution keeps visual order close to DOM order.
- Safe at any size, because there is nothing to reduce.
Performance
Items are distributed round-robin rather than height-balanced. Balancing needs every item measured, which means a reflow once images load — the exact layout jump this component exists to avoid.
Use loading="lazy" and explicit width/height on every image.
Composes with
Spotlight Card for a light hover response across many items. Do not wrap gallery items in Jelly, Tilt or Liquid at this scale: a hundred pointer-driven surfaces is the single easiest way to make a Pinky page feel slow.