# Masonry

> Pinterest-style masonry layout with virtualization.

Source: https://gallerykit.n.yatsyk.com/docs/masonry

# @gallerykit/masonry

**@gallerykit/masonry** registers a `masonry` layout with variable-height columns. It supports virtualization through `@tanstack/react-virtual` and the same pagination modes as `grid`.

* **Stability:** experimental
* **Peer dependencies:** `react`, `react-dom`, `framer-motion (optional)`, `@tanstack/react-virtual (optional)`
* **Dependencies:** `@gallerykit/core`

## Install

```bash
pnpm add @gallerykit/masonry
```

## Quick example

```tsx
import { Masonry } from "@gallerykit/masonry";

export default function Wall({ items }: { items: GalleryItem[] }) {
  return <Masonry items={items} columns={3} gap={8} />;
}
```

See [Getting Started](./getting-started.mdx) for the full walkthrough and [API](./api.mdx) for the public exports.