Grids e Sistemas de Composição
Como usar grids de 12 colunas para criar layouts equilibrados. Aprenda as regras básicas que profissionais usam.
O Que São Grids?
Um grid é uma estrutura invisível que divide a página em colunas e linhas. Pense nela como um mapa de tesouro — você sabe exatamente onde colocar cada elemento. A maioria dos sites modernos usa um grid de 12 colunas. Por quê? Porque 12 é divisível por 1, 2, 3, 4, 6 e 12. Isso oferece flexibilidade máxima para organizar conteúdo.
Sem um grid, seu layout fica desorganizado. Com um grid bem planejado, tudo respira. O espaço funciona a seu favor, não contra você. Os usuários sentem a diferença mesmo sem saber que existe um grid por trás.
Os 3 Pilares Fundamentais
1. Colunas e Margens
O grid divide seu espaço em colunas. Cada coluna tem a mesma largura. Entre as colunas existem margens (gutters). Essas margens criam respiração — é aí que o design respira. Se você usar 12 colunas com margem de 20px, cada coluna fica com a mesma largura. Elementos podem ocupar 2, 3, 4, 6 colunas ou quantas forem necessárias.
2. Alinhamento Vertical
Não é só horizontal. Você também precisa de linhas horizontais — chamadas de baseline grid. Cada elemento tem uma altura que se alinha a essa baseline. Se a baseline é 8px, os elementos têm altura de 8px, 16px, 24px, 32px. Tudo se alinha. Isso cria harmonia visual sem você perceber.
3. Espaçamento Consistente
A distância entre elementos não é aleatória. Ela segue a escala do grid. Se você usa um grid de 8px, as distâncias são 8px, 16px, 24px, 40px, 64px. Sempre múltiplos de 8. Isso cria previsibilidade. Os usuários sentem que tudo faz sentido, mesmo sem entender por quê.
Como Implementar um Grid
Não precisa de ferramentas complicadas. Você pode começar com CSS Grid ou Flexbox. A maioria dos designers usa um framework como Bootstrap ou Tailwind — eles já têm grids prontos. Mas entender como funciona por trás é importante.
Um grid básico tem alguns números-chave. Largura total do container: normalmente 1200px ou 1440px. Número de colunas: 12 é o padrão. Largura da coluna: largura total dividida pelo número de colunas. Gutter (margem): geralmente entre 16px e 32px.
Exemplo prático: um container de 1200px com 12 colunas e 20px de gutter. Cada coluna fica com aproximadamente 80px de largura. Se você quer um elemento que ocupe 6 colunas (metade da página), ele tem 520px de largura. Simples assim.
Padrões que Funcionam
Esses layouts são testados em centenas de sites. Funcionam porque respeitam o grid.
Hero + 3 Colunas
Uma seção grande no topo (full width), depois 3 colunas abaixo (4 colunas cada uma). Você vê isso em landing pages — imagem grande seguida de 3 features. Cada coluna tem 4 do grid de 12. Perfeito.
Sidebar + Conteúdo
Coluna esquerda com 3 colunas (menu), coluna direita com 9 colunas (conteúdo principal). Você vê em blogs, documentações, lojas online. A proporção 3:9 é clássica porque deixa o conteúdo respirar.
2 Colunas Iguais
6 colunas esquerda, 6 colunas direita. Imagem de um lado, texto do outro. Ou vice-versa. Isso funciona em praticamente todo contexto — sobre, serviços, depoimentos. É equilibrado, elegante e funcional.
Responsividade com Grid
O grid não é estático. Ele muda conforme a tela fica menor. No desktop você tem 12 colunas. No tablet, talvez 8 colunas. No mobile, 4 colunas. Os elementos se reorganizam automaticamente.
Exemplo: aquele layout de 3 colunas (4+4+4) no desktop? No tablet vira 2 colunas (6+6). No mobile vira 1 coluna (12). Você não redesenha a página — o grid faz isso por você. É por isso que grids são tão poderosos.
A regra de ouro: nunca coloque texto ou imagens muito grandes em uma tela pequena. Respeite o grid em todos os breakpoints. Se algo não cabe bem, mude o grid do breakpoint — não force o conteúdo.
Resumo: Pense em Grid
Grids não são uma restrição — são libertadores. Quando você para de adivinhar onde colocar as coisas e começa a usar um grid, o design fica melhor. Mais rápido. Mais consistente.
Os melhores sites que você conhece? Todos usam grids. Você não vê a estrutura, mas sente a ordem, o espaço, o equilíbrio. Isso é o grid funcionando nos bastidores.
Comece com um grid de 12 colunas. Use container de 1200px a 1440px. Respeite as margens. Mantenha tudo alinhado. Depois que isso virar natural, você pode experimentar grids mais complexos. Mas esse é o ponto de partida — e é tudo que você precisa para criar layouts profissionais.
Dica Final: Ferramentas como Figma têm grids embutidas. Use-as. Ative a visualização do grid enquanto desenha. Você aprenderá muito mais rápido vendo a estrutura enquanto trabalha.
Informação Educacional
Este artigo apresenta conceitos e práticas comuns em design de web. Os padrões descritos refletem as convenções da indústria, mas cada projeto tem necessidades específicas. Os números e medidas são exemplos — ajuste-os conforme seu contexto e público-alvo. A implementação técnica varia de acordo com as ferramentas e frameworks que você escolher. Consulte a documentação oficial do seu framework de escolha para detalhes de implementação.
