📏 Sistema de Grid de 12 Colunas
O grid de 12 colunas e o padrao da industria porque 12 e divisivel por 2, 3, 4 e 6, permitindo layouts flexiveis e simetricos.
Divisoes Comuns
💡 Tailwind CSS Grid
grid grid-cols-12 gap-4
col-span-3 (sidebar)
col-span-9 (content)
🏠 Layout de Dashboard Padrao
O layout mais comum em dashboards e Sidebar + Header + Content Area. A sidebar fica fixa, o content rola.
Estrutura Visual
Sidebar Fixa
- • Navegacao principal sempre visivel
- • Largura: 64px (collapsed) ou 240px (expanded)
- • Position: fixed ou sticky
- • Logo no topo, settings no fim
Content Area
- • margin-left igual a largura da sidebar
- • Scroll independente
- • max-width para legibilidade
- • Padding responsivo
📦 Cards e Containers
Cards sao os blocos fundamentais de um dashboard. Cada metrica, grafico ou tabela vive dentro de um card com estilo consistente.
Anatomia de um Card
💡 CSS do Card
bg-white dark:bg-gray-800
rounded-xl (12px)
border border-gray-200 dark:border-gray-700
shadow-sm
p-6 (24px padding)
📱 Breakpoints Responsivos
Dashboards precisam funcionar em desktop, tablet e mobile. Use breakpoints do Tailwind para adaptar o layout.
Breakpoints Tailwind
| Prefixo | Min-width | Dispositivo | Grid |
|---|---|---|---|
| sm: | 640px | Mobile landscape | 1-2 cols |
| md: | 768px | Tablet | 2-3 cols |
| lg: | 1024px | Laptop | 3-4 cols |
| xl: | 1280px | Desktop | 4+ cols |
| 2xl: | 1536px | Large desktop | Full grid |
Exemplo Responsivo
grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4
1 coluna mobile → 2 tablet → 4 desktop
📏 Espacamento Consistente
Use a escala de 8px para todos os espacamentos. Isso cria ritmo visual e facilita a manutencao.
Escala de Espacamento
💡 Regra Pratica
- • Entre cards: gap-4 ou gap-6
- • Padding de card: p-6
- • Entre secoes: mb-8 ou mb-12
- • Margens da pagina: px-4 sm:px-6 lg:px-8
🎯 Padroes de Layout
Existem padroes comprovados de layout para diferentes tipos de dashboard. Escolha baseado no objetivo principal.
Overview Dashboard
KPIs no topo, graficos no meio, tabela embaixo.
Uso: pagina inicial, visao executiva
Data Table Dashboard
Filtros no topo, tabela dominante, detalhes em modal.
Uso: listagem, CRUD, gestao
Analytics Dashboard
Date picker proeminente, multiplos graficos, comparativos.
Uso: relatorios, BI, metricas
Settings Dashboard
Navegacao lateral, formularios, secoes colapsaveis.
Uso: configuracoes, perfil, admin
📝 Resumo do Modulo
O que aprendemos:
- ✓Grid de 12 colunas e o padrao
- ✓Sidebar + Content e o layout classico
- ✓Cards tem anatomia consistente
- ✓Breakpoints adaptam o grid
- ✓Escala de 8px para espacamentos
Proximo modulo:
Sistema de Cores e Tokens - como definir paletas e usar cores com significado.
Ir para Modulo 1.5