Gerador de sistema de grid CSS
Gere um grid de colunas responsivo com seus próprios breakpoints, colunas, gutters, margens e largura máxima. Exporte CSS, classes utilitárias ou configuração do Tailwind.
Carregando Gerador de grid CSS…
Seus arquivos nunca saem do seu dispositivo
Como usar Gerador de grid CSS
- 1
Abra Gerador de grid CSS nesta página. Ele carrega direto no seu navegador.
- 2
Adicione seu arquivo, texto ou valores e ajuste as configurações.
- 3
Copie ou baixe o resultado. Nada é enviado nem armazenado.
Sobre esta ferramenta
Um sistema de grid dá a todas as páginas a mesma estrutura de base: um número fixo de colunas, espaçamentos consistentes e uma largura máxima de conteúdo, adaptando-se a cada tamanho de tela. Este gerador de sistema de grid permite definir essa estrutura uma vez e exportar o código pronto, para que designers e desenvolvedores trabalhem com o mesmo grid.
Como criar um grid
- Defina a largura máxima do conteúdo em pixels.
- Edite os breakpoints: para cada tamanho de tela, escolha o número de colunas, o gutter entre elas e a margem externa.
- Confira a prévia ao vivo das colunas.
- Escolha um prefixo de classe se for exportar classes.
- Copie o código como CSS puro, classes utilitárias ou configuração do Tailwind.
Uma configuração típica
| Tela | Colunas | Gutter |
|---|---|---|
| Celular | 4 | 16px |
| Tablet | 8 | 24px |
| Desktop | 12 | 24 a 32px |
Doze colunas são populares porque se dividem certinho em metades, terços, quartos e sextos.
Dicas
- Combine com o seu arquivo de design: use as mesmas colunas e gutters do layout grid do Figma.
- Limite o comprimento da linha: uma largura máxima de cerca de 1200 a 1440px mantém o texto legível em telas grandes.
- Use uma escala de espaçamento: gutters e margens de 8, 16, 24 ou 32px deixam o espaçamento consistente.
- Deixe o conteúdo decidir os breakpoints: adicione um onde o layout começa a quebrar, não só nos tamanhos de dispositivo.
Sistema de grid ou CSS grid?
Um sistema de grid é uma convenção de design; CSS grid é o recurso do navegador que pode implementá-lo. O CSS gerado usa CSS moderno e não precisa de framework. Para layouts de uma dimensão dentro do grid, use o gerador de Flexbox, e defina os tamanhos de texto com o gerador de escala tipográfica.
Perguntas frequentes
Quantas colunas um grid deve ter?
Doze colunas no desktop é a escolha mais comum porque se dividem em metades, terços e quartos. Celulares costumam usar 4 colunas e tablets 8.
O que é um gutter?
O espaço entre as colunas. Gutters típicos têm 16px no celular e de 24 a 32px em telas maiores.
Posso exportar o grid para o Tailwind?
Sim. Escolha o formato Tailwind para receber uma configuração das suas telas e espaçamentos.
Posso definir meus próprios breakpoints?
Sim. Edite a largura, as colunas, o gutter e a margem de cada breakpoint.
Qual largura máxima devo usar?
Entre cerca de 1200 e 1440 pixels funciona para a maioria dos sites e mantém linhas de texto com tamanho confortável em telas largas.
O código precisa de Bootstrap ou outro framework?
Não. O CSS e as classes geradas são CSS puro e funcionam sozinhos.