Masonry

Masonry packs children into a variable-height column grid. Each child is a Masonry.Item; the root measures its inline size and picks a column count from breakpointCols.

The default map opens more columns as the root grows. Pass your own breakpointCols object to replace that schedule: keys are min-width pixel thresholds against the Masonry root's content-box, and the largest matching breakpoint wins. Layout runs in the client after mount, so the first paint matches the default column count until ResizeObserver settles.

Compose each item as Elevator → Surface → Stack for chrome and spacing, and set gap from the spacing scale instead of custom column margins.

AnatomyCopy Anchor Link

Import the component and assemble its parts:

import { Masonry } from '@viraui/react';

<Masonry>
  <Masonry.Item />
</Masonry>

When to useCopy Anchor Link

• Image galleries, tag clouds, or card feeds where tile height varies
• Columns should reflow from the Masonry root width, not a fixed track grid
• You want packed columns rather than shared row heights

When not to useCopy Anchor Link

• Every row should share the same height, or items need spans → Grid
• A single flex axis is enough → Stack
• You only need a themed panel around content → Surface

RelatedCopy Anchor Link

• Grid — fixed tracks, spans, and auto-fill
• Stack — single-axis flex layout
• Surface — item chrome inside masonry cells
• Elevator — resting / hover shadow on item roots

Common examplesCopy Anchor Link

Responsive galleryCopy Anchor Link

A photo wall with uneven tile heights is the baseline Masonry layout. The built-in schedule applies unless you pass breakpointCols: one column by default, then more as the root grows.

Custom breakpointsCopy Anchor Link

Replace the default map when the wall should open columns at different root widths. Keys may arrive unsorted; the largest matching min-width still wins. Thresholds are measured on the Masonry root, not the viewport.

Variable-height tilesCopy Anchor Link

Pack presentational Surface cards with uneven copy length so column flow stays visible. Reach for Grid instead when every tile should share a row height or needs spans and placement.

Ask your agentCopy Anchor Link

Build an image gallery with eight placeholder tiles in a masonry layout — uneven photo heights, short captions under each shot.