Pretext Masonry Grid

Installation

$ shadcn add @jalco/masonry-grid

Usage

import { MasonryGrid } from "@/components/masonry-grid"

<MasonryGrid items={items} columns={3} />

Client component. Each card's text height is computed by Pretext using pure arithmetic. Cards are absolutely positioned into columns — no DOM measurement, no layout shift.

Examples

Three columns

API Reference

Notes

• Pretext-powered. Uses @chenglou/pretext for pure-arithmetic height prediction.
• Zero layout shift. Cards are positioned using computed heights, not DOM measurements. No reflow, no CLS.
• Responsive. Uses ResizeObserver to recalculate positions when the container width changes.
• Font matching. The font and lineHeight props must match the CSS styling of the card body text.