Layout

Grid Masonry

A grid masonry component

Overview

The Grid Masonry component arranges items in a masonry layout so columns have equal width but variable height. Content of different heights flows without large gaps, which suits image galleries and cards.

Key Business & UX Benefits

Uses vertical space well so short and tall items sit together without gaps.
Suits image galleries, pins, and card layouts with mixed heights.
Keeps column widths consistent for a clean, predictable grid.
Reduces manual layout code for masonry-style UIs.

Pro-Tip from Larry: Use it for image galleries or cards so content flows without big empty spaces.

Usage

GridMasonry

<GridMasonry>
  <div>Item 1</div>
  <div>Item 2</div>
  [...]
</GridMasonry>

Feature List

Masonry layout with equal-width columns
Variable-height items without large gaps
Configurable column count for responsive breakpoints
Suitable for image galleries, pins, and card grids

API Reference

Prop	Default	Type
`items`required		`unknown[]`
`columnWidth`	`400`	`number \| NonEmptyArray<number>`
`gap`	`0`	`number`
`ssrColumns`	`0`	`number`
`scrollContainer`	`null`	`HTMLElement \| null`
`minColumns`	`1`	`number`
`maxColumns`		`number`
`keyMapper`		`(item: unknown, column: number, row: number, index: number): string \| number \| symbol \| undefined`

Slot	Type
`default`	`{ item: unknown; column: number; row: number; index: number; }`