# Grid

Uso do grid do Tailwind para colunas, gaps, breakpoints e composição responsiva no Sinapse DS.

Contrato

## Adotamos o grid do Tailwind

O Sinapse DS usa utilitários de grid do Tailwind como linguagem principal de composição responsiva. Isso evita uma camada paralela de CSS para colunas e mantém exemplos, páginas e componentes falando a mesma sintaxe.

### Comece em uma coluna

A base mobile deve ser linear. Adicione colunas só quando a comparação ajuda a tarefa.

### Use gap, não margens entre filhos

Prefira \`gap-\*\` no grid para manter espaçamento previsível e fácil de alterar por breakpoint.

### Limite a largura de leitura

Grid não substitui container. Texto longo ainda precisa de \`max-w-\*\` para leitura confortável.

### Span é exceção

\`col-span-\*\` deve destacar prioridade real, não compensar uma grade mal escolhida.

Prévia responsiva

Primário

Exemplo usando grid, gap e col-span.

Secundário

Exemplo usando grid, gap e col-span.

Apoio

Exemplo usando grid, gap e col-span.

Observação

Exemplo usando grid, gap e col-span.

Breakpoints

## Pontos de quebra

Use os breakpoints padrão do Tailwind. Evite criar quebras locais sem necessidade; quando a composição depende do espaço real do componente, simplifique a estrutura antes de inventar uma regra nova.

| Prefixo | Largura | Uso no Sinapse DS |
| --- | --- | --- |
| sm | 640px | Ajustes pequenos; evite criar layouts complexos aqui. |
| md | 768px | Primeira quebra comum para duas colunas simples. |
| lg | 1024px | Sidebar, filtros persistentes e layout principal em duas regiões. |
| xl | 1280px | Grades amplas de cards, dashboards e páginas operacionais. |
| 2xl | 1536px | Apenas para preservar leitura em telas muito largas. |

Padrões

## Composições recomendadas

### Lista de cards

Use para itens equivalentes, como fundamentos e componentes. A grade cresce por breakpoint sem mudar a hierarquia do conteúdo.

```txt
grid grid-cols-1 gap-3 md:grid-cols-2 xl:grid-cols-3
```

### Página com navegação local

Use quando a página precisa de sidebar fixa em desktop e conteúdo linear no mobile.

```txt
grid grid-cols-1 gap-10 lg:grid-cols-[240px_1fr]
```

### Métricas compactas

Use para KPIs curtos. Se o texto do rótulo crescer, volte para uma coluna antes de comprimir o conteúdo.

```txt
grid grid-cols-2 gap-3 md:grid-cols-4
```

### Formulário em duas colunas

Use apenas para campos independentes. Campos de leitura longa ou decisão crítica devem ocupar a largura total.

```txt
grid grid-cols-1 gap-4 md:grid-cols-2
```