Sistemas de Grade: Por que sua página de destino desaba em diferentes tamanhos de tela

Você entrega a página. Parece ótima em seu laptop de 16 polegadas. Você a abre em seu telefone. Botões correm para fora da borda. Você a abre em um monitor 4K. Conteúdo flutua no meio de um oceano. Você a abre em um tablet. De alguma forma pior.

Isso é um problema de grade. Uma página de destino sem uma grade é um layout que funciona em exatamente um tamanho de tela. Seu editor. Cada outro dispositivo é um rolo de dados.

Uma grade é o scaffolding invisível que mantém elementos nos lugares certos não importa o tamanho da tela. Stripe tem um. Linear tem um. Lovable, Framer, e Webflow entregam eles por padrão. Se você construiu sem pensar em uma grade, sua página está brigando com você.

O que uma grade realmente é

Uma grade é uma série de linhas verticais e horizontais que agem como pontos de ancoragem. Visitantes não as veem. Eles as sentem. Como consistência, como ritmo, como "isso foi construído por um time real."

"Sem uma grade, caos reina no design." , Josef Müller-Brockmann

A grade não é uma jaula criativa. É uma caixa de areia. Você para de decidir "onde este botão deveria ir" e começa a decidir "qual coluna pertence." Decisões mais rápidas, melhores resultados.

Por que isso importa em uma página de destino

Consistência

Visitantes confiam em páginas que parecem coerentes. Uma grade faz cada seção compartilhar o mesmo ritmo. Cada cartão tem o mesmo gutter. Cada título começa no mesmo eixo.

Responsividade

Sua página tem que sobreviver cada tamanho de tela. Sem uma grade, design responsivo é casos extremos infinitos. Com um, a matemática o lida.

Velocidade

Decisões são mais rápidas quando você tem regras. "Onde isso vai?" vira "coluna 4 de 12." Seu eu futuro agradecerá.

Confiança

Layouts descuidados parecem descuidados. Alinhados parecem profissionais. Visitantes transferem aquele sentimento para seu produto.

Como usar uma grade em sua página

1. Escolha um tipo de grade

Três formas comuns:

• Grids de coluna - o mais comum para páginas de destino. A grade de 12 colunas é padrão porque 12 se divide limpamente por 2, 3, 4, e 6. Muitas opções de layout.
• Grids modulares - colunas mais linhas. Use quando tem muito conteúdo que precisa ser organizado verticalmente e horizontalmente.
• Grids baseline / pixel - cada elemento se encaixa em múltiplos de 8 (ou 4). Isso mantém espaçamento consistente em todo lugar.

Para maioria de páginas de destino, você quer uma grade de 12 colunas mais um sistema de espaçamento de 8-pixel.

2. Defina seus gutters e margens

O espaço importa tanto quanto as colunas:

• Gutters - o espaço entre colunas. 16px ou 24px são padrão.
• Margens - o espaço entre conteúdo e a borda da tela. Mais largo no desktop, mais apertado no mobile.

Escolha seus valores, defina-os em seu CSS ou ferramenta de design, e não quebre a regra.

3. Construa para cada tela

Uma grade de 12 colunas que é perfeita no desktop falha em um telefone. As colunas têm que desabar:

• Desktop - 12 colunas.
• Tablet - 8 colunas.
• Mobile - 4 colunas.

Teste em todos os três antes de entregar.

4. Quebre a grade intencionalmente. Uma vez.

Uma grade é um guia, não uma prisão. Às vezes você quer um elemento. Uma imagem herói, um testemunho destacado. Para quebrar fora das colunas. Aquele contraste puxa o olho.

Use isso uma vez por página máximo. Se você quebrar a grade cinco vezes, você não tem uma grade.

Maneiras comuns que construtores quebram isso

Gutters inconsistentes

• O erro: 20px entre cartões em uma seção, 15px em outra. A página lê como trêmula.
• O conserto: Escolha um gutter (16px é bom) e aplique em todo lugar.

Pensamento desktop-only

• O erro: Projetar um layout de desktop de 12-coluna e encolhê-lo para mobile. Alvos de toque ficam tiny, texto fica ilegível.
• O conserto: Projete mobile-first ou defina contagens de coluna explícitas em cada breakpoint.

Nenhum ritmo vertical

• O erro: Alinhamento horizontal é agudo, mas espaçamento vertical é aleatório. Cabeçalhos, parágrafos, e imagens sentam em distâncias aleatórias.
• O conserto: Use uma grade baseline. Cada margem vertical e padding é um múltiplo de 8.

Como produtos reais fazem isso

Bootstrap

Bootstrap entregou a grade de 12-coluna às massas. Maioria de páginas de destino SaaS antigas foram construídas nela. Ainda hoje, o ritmo de "12 colunas, 16px gutters, breakpoints definidos" é o padrão que deixa desenvolvedores entregar layouts limpos rápido.

Pinterest

A grade masonry do Pinterest é uma grade modular onde colunas são fixadas mas linhas fluem. É por isso que o feed parece infinito e limpo ao mesmo tempo. A grade mantém o ritmo mesmo quando conteúdo tem alturas wildly diferentes.

Bento Grids

O estilo bento. Caixas de tamanhos diferentes empacotando juntas. Parece custom e caótica. Olhe de perto e elas todas se encaixam em uma grade subjacente. É assim você recebe variedade visual sem perder estrutura.

Princípios relacionados

Grids trabalham melhor junto com esses:

• Espaço em Branco - grids decidem onde coisas vão; espaço em branco decide como muito espaço eles recebem.
• Hierarquia Visual - coloque os elementos mais importantes em posições de grade alto-impacto (canto superior esquerdo, centro morto).
• Alinhamento - uma grade é a forma mais fácil de manter tudo alinhado por padrão.

Recursos e leitura adicional

GridbyExample

Exemplos práticos de CSS Grid para levá-lo de design para código funcionando.

Adobe Grid System

Um guia completo para projetar com grids responsivos do time de design Adobe.

Perguntas frequentes