Masonry

Masonry arranges children into vertical columns using CSS multi-column layout, so items of different heights pack tightly without leaving large gaps — the Pinterest-style layout. Set the number of columns and the gap (in pixels) between them. Wrap each child in a MasonryItem so it doesn't split across a column break. Best for image galleries and card feeds with uneven content heights.

Example

import { Masonry, MasonryItem } from '@officina/ui';

<Masonry columns={3} gap={12}>
  {photos.map((photo) => (
    <MasonryItem key={photo.id}>
      <img src={photo.url} alt={photo.alt} />
    </MasonryItem>
  ))}
</Masonry>;

API

Masonry

The column container.

MasonryItem

Wrapper for a single child that prevents it from breaking across columns.

MasonryItem is composed from other primitives and exposes no direct props. Compose it with its subcomponents and standard element attributes.