# Grade de colunas (`grade`)

<!-- GERADO por scripts/gerar-catalogo.mjs a partir do componente.json. Para mudar, edite o componente.json e rode o script. -->

Colunas responsivas (2, 3, 4, automáticas ou assimétricas) que viram uma coluna no celular.

- **Categoria:** Estrutura
- **Equivalente no Elementor:** Seção interna / Grade do Contêiner (Inner Section, Grid)
- **Arquivos:** `grade.html`, `grade.css`
- **Precisa de JavaScript:** não

## Quando usar
- Lista de benefícios, cartões, caixas de ícone, logos
- Texto ao lado de imagem

## Quando não usar
- Tabela de dados (use <table>)
- Mais de 4 colunas: fica apertado e ilegível

## Variações
- **2 colunas:** classe ds-grade--2
- **3 colunas:** classe ds-grade--3
- **4 colunas:** classe ds-grade--4
- **Automática (cabe quantas der):** classe ds-grade--auto
- **Assimétrica 2/3 + 1/3:** classe ds-grade--2-1 ou ds-grade--1-2
- **Alinhada ao meio:** classe ds-grade--meio
- **Espaço largo:** classe ds-grade--larga

## Conteúdo esperado
- Filhos diretos: um por célula

## Acessibilidade
- A ordem de leitura é a ordem do HTML: não inverter visualmente o que muda o sentido

## Como carregar

```html
<link rel="stylesheet" href="tokens.css"><!-- do projeto, gerado por gerar-tokens-css.mjs -->
<link rel="stylesheet" href="base/base.css">
<link rel="stylesheet" href="componentes/grade/grade.css">
```

Tokens do contrato usados: `--ds-espaco-12`, `--ds-espaco-6`, `--ds-espaco-8`.