Grid
Uso do grid do TailwindCSS para colunas, gaps, breakpoints e composição responsiva no Sinapse.
Contrato
Adotamos o grid do TailwindCSS
O Sinapse usa utilities de grid do TailwindCSS 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.
Preview responsivo
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 TailwindCSS. 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 |
|---|---|---|
| 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, componentes e blocos. A grade cresce por breakpoint sem mudar a hierarquia do conteúdo.
grid grid-cols-1 gap-3 md:grid-cols-2 xl:grid-cols-3Página com navegação local
Use quando a página precisa de sidebar fixa em desktop e conteúdo linear no mobile.
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.
grid grid-cols-2 gap-3 md:grid-cols-4Formulário em duas colunas
Use apenas para campos independentes. Campos de leitura longa ou decisão crítica devem ocupar a largura total.
grid grid-cols-1 gap-4 md:grid-cols-2