ToolNestGerador Gratuito de Grade CSS
Última atualização: 18 de outubro de 2026
Resposta rápida: O CSS Grid é a forma mais rápida de construir layouts de página bidimensionais, mas acertar à mão a sintaxe de grid-template-columns é trabalhoso. Este gerador de grade CSS gratuito permite construir o layout visualmente: arraste os controles de colunas, linhas e espaçamento, clique em qualquer célula para um item abranger várias colunas ou linhas, comece com seis modelos testados (holy grail, barra lateral, painel, galeria…) e depois copie CSS + HTML limpos para colar no seu projeto. Tudo roda no seu navegador; sem cadastro.
Selecionado: item 1
CSS
HTML
Dica: clique em qualquer c\u00e9lula da pr\u00e9-visualiza\u00e7\u00e3o e ajuste sua extens\u00e3o de coluna e linha \u2014 o CSS gerado atualiza na hora.
✓ Grátis para sempre · ✓ Sem cadastro · ✓ O que você digita fica no seu navegador — nunca é enviado aos nossos servidores.
Como usar Gerador de Grade CSS
- Escolha um modelo (ou ajuste colunas, linhas e espaçamento com os controles).
- Escolha a unidade das trilhas: fr para layouts flexíveis, px para fixos, % para baseados em porcentagem.
- Clique em qualquer célula da pré-visualização para selecioná-la e ajuste sua extensão de coluna e de linha.
- Revise o CSS e o HTML gerados abaixo da pré-visualização: eles atualizam ao vivo enquanto você desenha.
- Copie o código e cole na sua folha de estilos e na sua marcação. Renomeie as classes para combinar com seu projeto.
Por que usar Gerador de Grade CSS
- Pré-visualização ao vivo — a grade se redesenha a cada movimento do controle; o que você vê é o que o código cria.
- Extensão de itens — clique em qualquer célula e estique-a por colunas e linhas; as regras
grid-column: span Nsão geradas para você. - Seis modelos reais — layouts de 12 colunas, holy grail, barra lateral, painel, galeria e revista para começar.
- Dimensionamento fr / px / % — gere trilhas
repeat()na unidade que combina com seu design. - Código limpo para copiar — CSS comentado mais a estrutura HTML correspondente, com um clique.
Casos de uso comuns
- Wireframes de página: Comece com o modelo holy grail ou barra lateral e esboce o esqueleto de uma página nova antes de escrever código. Envie o CSS gerado ao desenvolvedor junto com o mockup.
- Painéis e administração: O modelo de painel (cartões largos em cima, grade densa embaixo) é a forma da maioria das UIs de administração: ajuste as extensões aos seus widgets e copie o código.
- Galerias de fotos: O modelo de galeria combina uma peça em destaque grande com uma grade uniforme — o visual clássico de portfólio — com as extensões de linha fazendo o trabalho editorial.
- Grades de blog e revista: O modelo de revista mistura matérias em destaque largas com colunas estreitas, e o código cai direto num tema ou template.
- Aprender Grid visualmente: Os controles e as extensões tornam concretos em segundos conceitos abstratos (unidades fr, extensão, auto-posicionamento): mais rápido que ler a especificação.
Gerador de Grade CSS vs alternativas
- grid.layoutit.com (Layoutit): Um construtor visual de grades polido e conhecido, com áreas de arrastar e soltar. Excelente ferramenta: a nossa é uma alternativa mais leve — modelos, extensões e código para copiar numa página sem anúncios que carrega na hora.
- Escrever o CSS à mão: Controle total e zero dependências: a escolha certa quando você sabe exatamente o que quer. Este gerador vence na exploração: teste seis layouts em um minuto em vez de digitar e recarregar.
- Frameworks CSS (Bootstrap, Tailwind): Ótimos se seu projeto já usa um: seus sistemas de grade são testados em batalha. Exagerados como dependência para uma página independente, e menos expressivos que o Grid puro para layouts com extensões.
- Layouts só com Flexbox: Bons para arranjos unidimensionais como barras de navegação e fileiras de cartões. Para estrutura de página realmente bidimensional — cabeçalhos, barras laterais, painéis — o Grid é a ferramenta feita para o trabalho.
Resumindo: se você já está mergulhado no sistema de grade de um framework, fique nele: a consistência vence a novidade. Para páginas independentes, protótipos e aprendizado, desenhar a grade visualmente aqui e colar o CSS gerado é o caminho honesto mais rápido para um layout que funciona.
Perguntas frequentes
Como crio um layout com CSS Grid?
Três linhas: coloque
display: grid no contêiner, defina as trilhas com grid-template-columns (p. ex. repeat(3, 1fr)) e ajuste o gap. Os itens fluem sozinhos para as células. Este gerador escreve essas linhas para você: desenhe visualmente, copie o CSS, pronto.Qual a diferença entre CSS Grid e Flexbox?
O Grid é bidimensional (linhas e colunas ao mesmo tempo); o Flexbox é unidimensional (uma linha ou uma coluna). Regra prática: layouts de página e seção vão no Grid, interiores de componentes (barras de navegação, fileiras de botões, rodapés de cartão) vão no Flexbox. Eles se combinam: uma célula de grade pode ser um contêiner flex.
O que significa 1fr no CSS Grid?
Uma fração do espaço livre.
repeat(3, 1fr) divide o contêiner em três colunas iguais; 1fr 2fr faz a segunda coluna duas vezes mais larga que a primeira. Ao contrário das porcentagens, o fr desconta os espaçamentos automaticamente, então repeat(12, 1fr) com 16px de gap simplesmente funciona.Como faço um item abranger várias colunas?
Com
grid-column: span 2 (ou grid-row: span 2 para linhas). Nesta ferramenta, clique na célula e ajuste a extensão: a regra aparece sozinha no CSS gerado. Usos clássicos: um cabeçalho de largura total, uma barra lateral que abrange todas as linhas.Como deixo uma grade CSS responsiva?
A receita padrão é
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)): as colunas aparecem ou somem conforme a viewport, sem media queries. Este gerador produz contagens fixas de trilhas, que são o ponto de partida certo para layouts intencionais; troque para a receita auto-fit quando quiser uma grade fluida de cartões.O CSS Grid funciona em todos os navegadores?
Sim: todos os navegadores modernos o trazem sem prefixos desde 2017 (Chrome 57, Firefox 52, Safari 10.1, Edge 16). O suporte global passa de 98%. Se você ainda dá suporte a navegadores muito antigos, ofereça uma alternativa empilhada simples; para praticamente todo projeto atual, o Grid funciona sem mais.
Grid ou tabelas para o layout da página?
Grid, sempre. Tabelas são para dados tabulares, não para layout: quebram a acessibilidade (leitores de tela as anunciam como dados), resistem ao responsivo e misturam conteúdo com apresentação. O Grid dá a mesma estrutura visual com HTML semântico.