Intro
O Grid é o sistema estrutural responsável por organizar o layout da interface, garantindo consistência, alinhamento, ritmo visual e previsibilidade na distribuição dos componentes.
Ele define:
- Número de colunas
- Largura máxima do conteúdo
- Espaçamentos laterais (margins)
- Gutter (espaço entre colunas)
- Comportamento responsivo
O Grid é a base para todos os componentes e páginas do sistema.
Princípios do Grid
O sistema de grid deve garantir:
- Alinhamento consistente
- Escalabilidade entre dispositivos
- Flexibilidade compositiva
- Leitura confortável
- Hierarquia visual clara
Todo layout deve respeitar as colunas definidas para cada breakpoint.
Breakpoints
O sistema é estruturado em três principais contextos:
- Desktop
- Tablet
- Mobile
Desktop
Estrutura
- 12 colunas
- Layout fluido dentro de largura máxima definida
- Composição modular
Cada coluna pode ser combinada para formar múltiplas proporções:
- 1 coluna (100%)
- 2 colunas (6/6)
- 3 colunas (4/4/4)
- 4 colunas (3/3/3/3)
- 6 colunas (2/2/2/2/2/2)
Exemplos de Distribuição (Desktop)
Com base na imagem:
- 168px → blocos menores
- 264px → blocos médios
- 360px → colunas amplas
- 552px → meia largura
- 744px → proporção assimétrica
- 840px → layout 8/4
- 936px → layout 9/3
- 1128px → largura total
Essas proporções permitem:
- Conteúdo principal + sidebar
- Layout de cards
- Formulários em múltiplas colunas
- Tabelas com filtros laterais
Margens Laterais (Desktop)
Exemplo apresentado:
- Margem externa: 48px
- Gutter interno: 24px
Esses valores garantem respiro lateral e legibilidade.
Tablet
Estrutura
- 12 colunas (reorganizadas)
- Layout adaptativo
- Redução de proporções laterais
Embora mantenha 12 colunas estruturais, a composição passa a priorizar:
- 2 colunas principais
- 1 coluna dominante
- Layout empilhado progressivamente
Exemplos de Distribuição (Tablet)
Baseado na imagem:
- 96px + 16px (margem/gutter)
- 208px (3 colunas equivalentes)
- 320px (6 colunas)
- 432px + 208px (layout 8/4 adaptado)
- 656px (largura quase total)
Margens Laterais (Tablet)
Exemplo apresentado:
- Margem externa: 32px
- Gutter: 16px
A redução da margem acompanha a redução do viewport.
Mobile
Estrutura
- 2 colunas estruturais
- Layout predominantemente vertical
- Foco em leitura linear
No mobile, a estrutura é simplificada para priorizar:
- Conteúdo empilhado
- Hierarquia vertical
- Redução de múltiplas colunas simultâneas
Exemplos de Distribuição (Mobile)
Baseado na imagem:
- 128px + 24px (margem/gutter)
- 280px (largura principal)
- 100% largura (coluna única dominante)
Margens Laterais (Mobile)
Exemplo apresentado:
- Margem externa: 16px
- Gutter: 24px
Mobile prioriza espaçamento confortável para toque.
Gutter
O gutter é o espaçamento entre colunas.
Função:
- Evitar colisão visual
- Garantir ritmo
- Melhorar escaneabilidade
Valores recomendados:
- Desktop: 24px
- Tablet: 16px
- Mobile: 16–24px
Comportamento Responsivo
O grid deve:
- Reorganizar colunas automaticamente
- Empilhar conteúdos conforme necessário
- Preservar hierarquia
- Manter proporção visual consistente
Nunca:
- Redimensionar elementos arbitrariamente
- Quebrar alinhamento base
- Misturar múltiplos grids na mesma página
Padrões de Uso
Use grid para:
- Layout de páginas
- Estrutura de formulários
- Distribuição de cards
- Tabelas com filtros
- Conteúdo editorial
Não use grid para:
- Ajustes pontuais de micro alinhamento
- Compensar erros de espaçamento
- Criar layouts desalinhados
Boas Práticas
✅Faça
- Alinhe sempre ao grid
- Use múltiplos de coluna
- Respeite margens laterais
- Mantenha consistência entre páginas
- Teste em todos breakpoints
❌Não Faça
- Não ignore gutter
- Não use largura arbitrária fora do sistema
- Não crie layouts assimétricos sem justificativa
- Não misture proporções inconsistentes
Relação com Componentes
O grid é base para:
- Formulários
- Cards
- Tabelas
- Tiles
- Carrosséis
- Páginas administrativas
Nenhum componente deve quebrar o grid principal.
Resumo
O sistema de Grid define a fundação estrutural do layout e garante:
- Consistência
- Escalabilidade
- Responsividade
- Clareza estrutural
- Coerência visual
Desktop usa 12 colunas amplas, Tablet reorganiza proporcionalmente e Mobile simplifica para 2 colunas com foco vertical.