🔀 CSS Grid vs Flexbox
Entendendo quando usar cada tecnologia de layout
CSS Grid e Flexbox nao sao concorrentes - sao complementares. Grid e ideal para layouts 2D (linhas E colunas simultaneamente), enquanto Flexbox e perfeito para layouts 1D (linha OU coluna). Entender quando usar cada um e fundamental para criar dashboards eficientes.
Regra pratica: use Grid para a estrutura macro (sidebar + content + header) e Flexbox para componentes internos (alinhamento de itens em uma toolbar, distribuicao de botoes). Ambos podem ser combinados sem problemas.
Box de Detalhamento
CSS Grid - Use quando
- • Layout de pagina inteira (header, sidebar, content)
- • Grid de cards com tamanhos definidos
- • Layouts onde itens ocupam multiplas linhas/colunas
- • Controle preciso de gaps entre elementos
- • Areas nomeadas (grid-template-areas)
Flexbox - Use quando
- • Alinhar itens em uma direcao (horizontal ou vertical)
- • Distribuir espacos entre itens (justify-content)
- • Centralizar conteudo vertical e horizontalmente
- • Itens que crescem/encolhem dinamicamente
- • Navegacao, toolbars, grupos de botoes
Comparacao Visual
Grid (2D)
Flexbox (1D)
Box de Dados
💡 Dica Pratica
Com Tailwind CSS, use grid grid-cols-* para Grid e flex para Flexbox. A combinacao grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 e o padrao mais usado para grids responsivos de cards.
🏗️ Dashboard Layout Patterns
Estruturas classicas usadas em dashboards profissionais
Dashboards seguem padroes de layout bem estabelecidos. O mais comum e o Sidebar + Header + Content, onde a sidebar contem navegacao, o header tem busca e perfil, e o content area exibe os dados. Variacoes incluem sidebar colapsavel, header fixo ou topbar-only.
CSS Grid e perfeito para estruturar esses layouts com grid-template-areas, permitindo nomear cada regiao e reorganiza-las facilmente para diferentes breakpoints.
Box de Detalhamento
Sidebar Left
Mais comum. Menu fixo a esquerda.
Topbar Only
Simples. Ideal para apps menores.
Double Sidebar
Icones + labels expandidos.
/* Layout classico de dashboard com CSS Grid */
.dashboard-layout {
display: grid;
grid-template-columns: 280px 1fr;
grid-template-rows: 64px 1fr;
grid-template-areas:
"sidebar header"
"sidebar content";
min-height: 100vh;
}
.sidebar { grid-area: sidebar; }
.header { grid-area: header; }
.content { grid-area: content; }
/* Responsivo: sidebar vira drawer em mobile */
@media (max-width: 768px) {
.dashboard-layout {
grid-template-columns: 1fr;
grid-template-areas:
"header"
"content";
}
.sidebar {
position: fixed;
transform: translateX(-100%);
/* Toggle via JS */
}
}
/* Tailwind equivalente */
/* grid grid-cols-[280px_1fr] grid-rows-[64px_1fr] */
/* md:grid-cols-1 (mobile) */✓ Fazer
- • Header fixo para acesso rapido a busca/perfil
- • Sidebar colapsavel para mais espaco de conteudo
- • Content area com scroll independente
- • Usar grid-template-areas para clareza
✗ Evitar
- • Sidebar fixa muito larga (> 300px)
- • Header muito alto roubando espaco vertical
- • Layout que nao funciona em tablet
- • Scroll horizontal no conteudo principal
📏 Grid Systems (12-Column)
Sistema de grid modular para layouts consistentes
O grid de 12 colunas e o padrao da industria porque 12 e divisivel por 2, 3, 4 e 6 - permitindo layouts de 2, 3, 4 ou 6 colunas iguais. Bootstrap popularizou esse sistema, e Tailwind oferece grid-cols-12 com col-span-*.
Para dashboards, o grid de 12 colunas permite criar layouts como 8 colunas para conteudo + 4 colunas para sidebar, ou 3 cards de 4 colunas cada. A flexibilidade matematica e o grande diferencial.
Grid de 12 Colunas
Box de Dados
<!-- Grid de 12 colunas com Tailwind -->
<div class="grid grid-cols-12 gap-6">
<!-- Card grande: 8 de 12 colunas -->
<div class="col-span-12 lg:col-span-8">
<div class="bg-dark-800 rounded-xl p-6">
Grafico Principal
</div>
</div>
<!-- Cards laterais: 4 de 12 colunas -->
<div class="col-span-12 lg:col-span-4 space-y-6">
<div class="bg-dark-800 rounded-xl p-6">KPI 1</div>
<div class="bg-dark-800 rounded-xl p-6">KPI 2</div>
</div>
<!-- Linha de 3 cards iguais -->
<div class="col-span-12 md:col-span-4">Card 1</div>
<div class="col-span-12 md:col-span-4">Card 2</div>
<div class="col-span-12 md:col-span-4">Card 3</div>
</div>💡 Dica Pratica
Prefira col-span-full ao inves de col-span-12 para elementos que ocupam toda a largura - e mais semantico. Use col-start-* e col-end-* para posicionamento preciso quando necessario.
🃏 Card Grids e Auto-fit
Grids responsivos que se adaptam automaticamente
O padrao auto-fit + minmax() cria grids que se ajustam automaticamente ao espaco disponivel, sem precisar de media queries. O CSS calcula quantos cards cabem na linha baseado no tamanho minimo definido.
Este padrao e ideal para grids de cards de KPIs, listas de produtos, ou qualquer colecao de itens de tamanho similar. Combina o melhor dos dois mundos: layout fluido e tamanho minimo garantido.
Box de Detalhamento
auto-fit vs auto-fill
- auto-fit: Expande itens para preencher espaco vazio
- auto-fill: Mantem colunas vazias (phantom columns)
- Recomendado: auto-fit para maioria dos casos
minmax() explicado
- minmax(250px, 1fr): Minimo 250px, maximo igual (1fr)
- minmax(0, 1fr): Pode encolher ate 0
- minmax(200px, 400px): Entre 200px e 400px
Grid Auto-fit em Acao
Redimensione a janela para ver o grid se ajustar automaticamente:
<!-- CSS puro -->
<div style="
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 1.5rem;
">
<div class="card">...</div>
<div class="card">...</div>
<div class="card">...</div>
</div>
<!-- Tailwind (usando classes arbitrarias) -->
<div class="grid gap-6
grid-cols-[repeat(auto-fit,minmax(250px,1fr))]">
...
</div>
<!-- Tailwind alternativa (breakpoints tradicionais) -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
...
</div>💡 Dica Pratica
O valor ideal para minmax() em cards de dashboard e entre 240px e 320px. Menor que isso, o conteudo fica comprimido. Maior, e voce tera poucas colunas em telas medias.
🪆 Nested Layouts
Layouts dentro de layouts para interfaces complexas
Layouts aninhados sao inevitaveis em dashboards complexos. Um card pode conter um grid de metricas, que por sua vez usa flexbox para alinhar icone + valor. A chave e manter a hierarquia clara e nao exagerar na profundidade.
Regra: Grid para estrutura, Flex para alinhamento interno. Um card com header + content + footer usa flex-col. O content pode ser um grid de dados. O header usa flex-row para titulo + acoes.
Box de Detalhamento
Hierarquia Tipica
Boas Praticas
- • Maximo 3-4 niveis de aninhamento
- • Componentes reutilizaveis para padroes repetidos
- • Gaps consistentes (4, 6, 8 em Tailwind)
- • Evitar posicionamento absoluto desnecessario
Exemplo: Card com Layout Aninhado
function DashboardCard({ title, subtitle, icon, children }) {
return (
<div className="bg-dark-800 rounded-xl border border-dark-600
flex flex-col"> {/* Flex vertical */}
{/* Header: Flex horizontal */}
<div className="flex items-center justify-between p-4
border-b border-dark-600">
<div className="flex items-center gap-3">
<div className="w-10 h-10 bg-blue-500/20 rounded-lg
flex items-center justify-center">
{icon}
</div>
<div>
<div className="font-medium">{title}</div>
<div className="text-xs text-neutral-400">{subtitle}</div>
</div>
</div>
<button>⋮</button>
</div>
{/* Body: Conteudo flexivel */}
<div className="p-4 flex-1">
{children}
</div>
</div>
);
}📐 Spacing Systems
Espacamento consistente para interfaces harmoniosas
Spacing consistente e o que diferencia interfaces amadoras de profissionais. Um sistema de espacamento usa uma escala fixa (4px, 8px, 16px, 24px, 32px...) aplicada consistentemente em margins, paddings e gaps por toda a aplicacao.
Tailwind usa uma escala baseada em 4px (0.25rem). Entao p-4 = 16px, gap-6 = 24px, m-8 = 32px. Decorar os valores mais usados (4, 6, 8) acelera muito o desenvolvimento.
Box de Detalhamento
Escala Tailwind (mais usados)
Onde aplicar
- gap-4/6: Entre cards em um grid
- p-4/6: Padding interno de cards
- space-y-4: Entre secoes de conteudo
- py-12: Padding vertical de secoes
- gap-2: Entre icone e texto
Box de Dados
✓ Fazer
- • Usar valores da escala Tailwind (4, 6, 8...)
- • Manter gaps iguais em grids similares
- • Padding interno maior que gaps externos
- • Espacamento proporcional ao tamanho do texto
✗ Evitar
- • Valores arbitrarios (17px, 23px)
- • Espacamento diferente em contextos iguais
- • Margins e paddings sem padrao
- • Misturar px e rem sem consistencia
💡 Dica Pratica
Crie design tokens no seu tailwind.config.js para padronizar: card: 'p-6', section: 'py-12', grid: 'gap-6'. Assim toda equipe usa os mesmos valores, e mudancas globais ficam centralizadas.