# Grid

> Responsive uniform grid layout with optional virtualization.

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

# @gallerykit/grid

**@gallerykit/grid** registers a `grid` layout with the GalleryKit registry. It supports infinite scroll, load-more, and paged pagination modes, custom aspect ratios, and virtualization through `@tanstack/react-virtual`.

Both the `<Grid>` component and the `useGalleryGrid` hook are exposed for direct use or custom rendering.

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

## Install

```bash
pnpm add @gallerykit/grid
```

## Quick example

```tsx
import { Grid } from "@gallerykit/grid";

const items = Array.from({ length: 24 }, (_, i) => ({
  id: String(i),
  src: `/photo-${i}.jpg`,
  alt: ""
}));

export default function Page() {
  return <Grid items={items} columns={{ base: 2, md: 3, lg: 4 }} aspectRatio="square" />;
}
```

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