Construtor de Sistema de Grelha

Por que usar um sistema de grelha em design web

Um sistema de grelha divide uma página em um número fixo de colunas separadas por espaçamentos regulares e alinha cada elemento a essa estrutura. Isso dá ao layout um ritmo visual que o leitor percebe mesmo sem saber nomear: títulos, imagens e blocos de texto ficam alinhados entre si em vez de flutuar em posições arbitrárias. Em um site responsivo, a grelha também oferece um único conjunto de regras a ajustar conforme a largura da tela, em vez de reposicionar cada elemento manualmente para cada tamanho.

CSS Grid, Flexbox e Bootstrap: quando usar cada um, e a ascensão do Tailwind CSS

O CSS Grid trabalha em duas dimensões, linhas e colunas ao mesmo tempo, o que o torna adequado para a estrutura geral de uma página ou uma grade de cartões com alinhamento uniforme nos dois sentidos. O Flexbox trabalha em um único eixo (linha ou coluna) e serve bem a componentes menores, como uma barra de navegação ou um grupo de botões, onde os elementos precisam se distribuir ou alinhar ao longo de uma linha. A grelha do Bootstrap é um sistema de 12 colunas construído sobre o Flexbox, com classes prontas (col-6, col-4, e assim por diante): continua muito usada no Brasil, onde uma grande comunidade de freelancers constrói sites em WordPress e temas que dependem dessas classes prontas para montar o layout rápido, sem escrever CSS próprio. O Tailwind CSS tem crescido com força no mesmo público com uma abordagem diferente, classes utilitárias aplicadas direto na marcação em vez de componentes de grelha nomeados, o que agrada a quem quer controle fino sem sair do HTML. Para um projeto novo sem framework, o CSS Grid puro costuma dar um resultado mais limpo com menos marcação do que as outras duas opções.

Limites do código gerado

O código produzido por esta ferramenta é um ponto de partida para um único ponto de quebra, de largura fixa. Ele não gera media queries, então o número de colunas e o espaçamento permanecem iguais em qualquer largura de tela até que você adicione seus próprios pontos de quebra. Na prática, um layout costuma reduzir para menos colunas no celular (4 é comum) e um número intermediário no tablet (8 é comum), mantendo o número completo só no desktop. Reduza o número de colunas e ajuste o espaçamento dentro de uma media query para cada ponto de quebra que o seu design precisar.

Boas práticas de espaçamento e margem

Valores de espaçamento comuns em design web são 8px, 16px e 24px, geralmente alinhados a uma escala de espaçamento já usada em outras partes do site (botões, preenchimento interno, margens), para que o layout pareça consistente em vez de arbitrário. A própria grelha de 12 colunas vem do design impresso, onde uma página dividida em 12 partes se repartia com exatidão em metades, terços, quartos ou sextos, uma propriedade que o design web manteve por oferecer a mesma flexibilidade para a largura das colunas. Uma margem igual ou maior que o espaçamento evita que a borda externa do layout fique apertada contra a borda da tela. Para proporções baseadas na relação de uma página ou imagem em vez de um número de colunas, veja a Calculadora de Proporção de Imagem, e para espaçamentos baseados na proporção áurea, a Calculadora da Proporção Áurea.