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

# Colunas agrupadas

> Cookbook — bloco contêiner (grupo) com um nível de filhos aninhados.

> Quero um grupo que aceita outros blocos dentro, como colunas de rodapé. Qual é a implementação recomendada?

Índice: [Cookbooks](https://docs-loja.usecorvex.com.br/cookbook/overview.md)

***

## Contratos utilizados

* [Section Contract](https://docs-loja.usecorvex.com.br/reference/contracts/section.md)
* [Block Contract](https://docs-loja.usecorvex.com.br/reference/contracts/block.md) — bloco contêiner
* [Schema Contract](https://docs-loja.usecorvex.com.br/reference/contracts/schema.md)
* `@corvex/runtime` — `SectionBlockCanvas` na seção e `BlockCanvas` no bloco contêiner

Isto **não** é [grupo de layout](https://docs-loja.usecorvex.com.br/reference/contracts/theme.md#must--layout-groups) (`layoutGroups` / `groups/*.json`). Grupo de layout organiza **seções** globais (cabeçalho e rodapé). Bloco contêiner organiza **blocos** dentro de uma seção.

***

## Objetivo

```text theme={"theme":{"light":"github-light","dark":"github-dark"}}
Seção Colunas agrupadas
└── Bloco grupo (contêiner)
    └── Bloco texto (folha)
```

Um nível extra só. O grupo **não** lista outro grupo em `blocks.json`.

***

## Arquivos

```text theme={"theme":{"light":"github-light","dark":"github-dark"}}
sections/grouped-columns/
├── section.jsx
├── schema.json
├── blocks.json
└── styles.css

blocks/group/
├── block.jsx
├── schema.json
└── blocks.json

blocks/text/
├── block.jsx
└── schema.json
```

`theme.json`: IDs em `sections[]` e `blocks[]`.

***

## Manifest

Seção — só o contêiner:

```json theme={"theme":{"light":"github-light","dark":"github-dark"}}
{
  "blocks": [{ "type": "group" }],
  "max_blocks": 6
}
```

Grupo — só folhas:

```json theme={"theme":{"light":"github-light","dark":"github-dark"}}
{
  "blocks": [{ "type": "text" }],
  "max_blocks": 12
}
```

`corvex build` anexa os dois manifests. **Não** importe `blocks.json` no JSX.

***

## JSX

Seção: `{children}` em `SectionBlockCanvas`.

Grupo: `{children}` em `BlockCanvas`. Sem `.map` de filhos.

```jsx theme={"theme":{"light":"github-light","dark":"github-dark"}}
import { BlockCanvas } from '@corvex/runtime';

export default function GroupBlock({ settings = {}, children }) {
  const direction = settings.direction === 'row' ? 'row' : 'column';
  return (
    <div className={`group-block group-block--${direction}`}>
      <BlockCanvas className="group-block__canvas">{children}</BlockCanvas>
    </div>
  );
}
```

***

## Theme Defaults

Looks iniciais ficam em `templates/*.json`, com `blocks` e `block_order` **dentro** do grupo:

```json theme={"theme":{"light":"github-light","dark":"github-dark"}}
{
  "type": "grouped-columns",
  "settings": { "title": "Rodapé em grupos" },
  "blocks": {
    "g1": {
      "type": "group",
      "settings": { "direction": "column" },
      "blocks": {
        "t1": { "type": "text", "settings": { "text": "Join the club" } }
      },
      "block_order": ["t1"]
    }
  },
  "block_order": ["g1"]
}
```

Bloco sem `block_order` continua folha.

***

## Checklist

* [ ] `blocks/{id}/blocks.json` só no contêiner
* [ ] Filho do grupo é folha (sem `blocks.json` próprio)
* [ ] `{children}` na seção (`SectionBlockCanvas`) e no grupo (`BlockCanvas`)
* [ ] Template com JSON aninhado, sem banners inventados no JSX
* [ ] `corvex validate` aceita o tema; rejeita grupo dentro de grupo


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.