Masonry
layoutCSS masonry layout for variable-height items like photos or cards.
Preview
No preview available
Check the code examples below.
Installation
npm install @launchapp/design-systemImport
import { Masonry } from "@launchapp/design-system";Examples
Photo masonry grid
<Masonry columns={3} gap={4}> {photos.map((photo) => ( <img key={photo.id} src={photo.src} alt={photo.alt} className="rounded-lg w-full" /> ))}</Masonry>Props
| Prop | Type | Default | Description |
|---|---|---|---|
children* | React.ReactNode | — | Items to arrange in masonry layout. |
columns | number | Record<string, number> | 3 | Number of columns (or responsive breakpoint map). |
gap | number | 4 | Gap between items in Tailwind units. |