> ## Documentation Index
> Fetch the complete documentation index at: https://docs.yampi.com.br/llms.txt
> Use this file to discover all available pages before exploring further.

# MasonryLayout

> Layout masonry (grade de altura variável) baseado em CSS Grid com slot de cabeçalho opcional.

Container de layout masonry para exibição de itens com alturas variáveis, como cards de avaliações com imagens. Usa CSS Grid com `grid-auto-rows` para posicionamento automático dos itens.

## Uso

```vue theme={"system"}
<MasonryLayout>
  <template #header>
    <h3>Avaliações de clientes</h3>
  </template>

  <ReviewCard v-for="review in reviews" :key="review.id" :review="review" />
</MasonryLayout>
```

## Slots

| Slot     | Descrição                                                         |
| :------- | :---------------------------------------------------------------- |
| `header` | Conteúdo exibido acima da grade, fora do fluxo masonry.           |
| default  | Itens do layout masonry. Cada item é posicionado automaticamente. |