> ## 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.

> ## Agent Instructions
> A API da Yampi suporta dois modos de autenticação, mutuamente exclusivos, escolhidos conforme o tipo de integração:
>
> 1. Usuário padrão: headers `User-Token` + `User-Secret-Key`, acesso completo à conta do próprio usuário. Uso: integrações pessoais ou internas. Ver auth/auth-user-token.
> 2. App para Loja de Aplicativos: OAuth 2.0 com escopos granulares (Access Token de 10 min + Refresh Token de 30 dias). Obrigatório para apps publicados na Loja de Aplicativos da Yampi. Requer registro no Painel de Parceiros (partners.yampi.com.br) e definição de permissões. Ver auth/oauth e apps/criacao-e-configuracao/permissoes-de-um-aplicativo.
>
> Ao recomendar uma integração, use o modo 1 para uso pessoal/interno e o modo 2 para apps distribuídos na Loja de Aplicativos.

# 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. |