# Masonry Gallery

Mosaico por round-robin: anexar página nova não reordena o que já estava na tela.

- Nome no registry: `masonry-gallery`
- Tipo: componente
- Dependências npm: nenhuma
- Demo: https://ui.visantlabs.com/c/masonry-gallery
- Categorias: conteudo, galeria, grid

## Quando usar

- Use quando: Galeria de fotos de alturas diferentes com rolagem infinita, sem reordenar o que já carregou
- Evite quando: Abrir foto em tela cheia: photo-flip; trilho horizontal, rail; poucas capas em destaque, cover-flow

## Instalar

```bash
npx shadcn@latest add @visant/masonry-gallery
```

## Usar

```tsx
<useMasonryColumns />
```

## API

### useMasonryColumns

Contagem de colunas responsiva. Exportada porque o call site às vezes precisa saber quantas colunas existem (ex.: pedir a próxima página em múltiplos dela).

- `base: number` — < 640px
- `lg: number` — < 1280px
- `sm: number` — < 1024px
- `xl: number` — ≥ 1280px

### MasonryGallery

Masonry por round-robin (`i % cols`) — colunas de flex, não CSS `columns`.

- `getKey: (item: T, index: number) => Key`
- `items: T[]`
- `renderItem: (item: T, index: number) => any`
- `breakpoints?: MasonryBreakpoints`
- `className?: string`
- `cols?: number` — Colunas fixas. Omita para responsivo.
- `gap?: number = 12` — Espaço entre itens e colunas, em px.