Gerador CSS Grid

Gerador CSS Grid

Gerador CSS Grid grátis: preview ao vivo, saída CSS + Tailwind simultânea, editor visual de grid-template-areas e demo auto-fill vs auto-fit. Sem cadastro.

Atualizado em junho de 2026

Presets Rápidos
Configuração do Layout
Modo
3
2
16px
Tamanhos de track personalizados
justify-items stretch
align-items stretch
Canvas Interativo
6/12
Código 
<div class="grid grid-cols-3 grid-rows-2 gap-4">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>
Item

Clique em um item no canvas para editar seus spans de coluna e linha.

Laboratório Auto-fill vs Auto-fit

auto-fill cria o máximo de tracks possível e mantém os vazios — auto-fit colapsa tracks vazios e os itens expandem para preencher a linha. Arraste o slider para ver a diferença.

3
160px
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
1
2
3

Gerador CSS Grid — Builder Visual com Saída Tailwind e CSS

Monte qualquer layout CSS Grid visualmente — ajuste colunas, linhas, gap e spans dos itens e veja o grid atualizar em tempo real. Este gerador css grid exporta o layout como CSS puro e classes Tailwind ao mesmo tempo, algo que nenhum outro grid generator oferece. Comece de um preset (Holy Grail, Dashboard, Card Grid) ou do zero.

Além do básico, você tem um editor visual de grid-template-areas para layouts nomeados, breakpoints responsivos com media queries mobile-first e um laboratório interativo de auto-fill vs auto-fit — a parte mais confusa do CSS Grid finalmente explicada na prática.

Como Usar o Gerador CSS Grid

Do grid em branco ao código pronto para produção em menos de um minuto:

  1. Escolha um preset ou defina os tracks — clique em Holy Grail, Dashboard, Card Grid, Magazine, Mosaic, App Shell ou 12-Column, ou arraste os sliders de Colunas e Linhas. O canvas interativo atualiza na hora.
  2. Ajuste os itens — no modo Spans, clique em qualquer item do canvas e mude col-span, row-span e posição inicial. No modo Áreas Nomeadas, digite nomes (header, sidebar, main) direto na matriz do editor e o layout se reorganiza ao vivo.
  3. Refine os tracks — digite tamanhos personalizados como 200px 1fr minmax(150px, 1fr) para misturar colunas fixas e flexíveis; canvas e código refletem cada mudança.
  4. Copie o código — alterne entre as abas Tailwind, CSS, HTML e Responsivo e clique em Copiar (ou pressione Shift+Enter). A aba Responsivo gera media queries mobile-first automaticamente.

Exemplos do Gerador CSS Grid

Algumas configurações reais e o código exato que o gerador produz:

Exemplo — grade de cards com 3 colunas:

Config:   3 colunas, 2 linhas, gap 16px
CSS:      display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
Tailwind: grid grid-cols-3 grid-rows-2 gap-4

Exemplo — layout Holy Grail (áreas nomeadas):

Config: colunas 200px 1fr 200px, áreas "header header header" / "sidebar main aside" / "footer footer footer"
CSS:    grid-template-areas: "header header header" "sidebar main aside" "footer footer footer";
        .header { grid-area: header; } …

Exemplo — item ocupando 2 colunas:

Config:   item 1 com col-span 2
CSS:      .item-1 { grid-column: span 2; }
Tailwind: <div class="col-span-2">1</div>

Exemplo — tracks personalizados com minmax (caso especial):

Config:   grid-template-columns: 200px 1fr minmax(150px, 1fr)
Tailwind: grid-cols-[200px_1fr_minmax(150px,1fr)]   ← valor arbitrário, gerado automaticamente

Exemplo — célula vazia nas áreas nomeadas (caso especial):

Config: deixe uma célula em branco no editor de áreas
Saída:  grid-template-areas: "header header" ". main"   ← o ponto é uma célula vazia válida

CSS Grid — O Que É e Por Que Importa

CSS Grid Layout é um sistema de layout bidimensional que controla colunas e linhas simultaneamente. Diferente do Flexbox, que é unidimensional (uma linha OU coluna), o Grid posiciona itens nos dois eixos ao mesmo tempo — ideal para layouts de página, dashboards, grades de cards e qualquer UI onde elementos precisam se alinhar na horizontal e na vertical.

A unidade fr é o superpoder do Grid: representa uma fração do espaço restante após os tracks fixos serem colocados. grid-template-columns: 200px 1fr 1fr em um container de 800px gera uma sidebar de 200px e duas colunas de 300px — sem matemática de porcentagem. Combinada com minmax() e repeat(auto-fill, …), permite grids totalmente responsivos sem escrever uma única media query.

Casos de Uso Comuns

  • Layouts de página (Holy Grail): header, footer e três colunas no meio em seis linhas de CSS — um layout que antes exigia hacks com float. O preset Holy Grail gera tudo na hora.
  • Dashboards: sidebar fixa mais área de conteúdo flexível com zonas de stats e widgets. Áreas nomeadas mantêm o CSS legível conforme o dashboard cresce.
  • Galerias de produtos/cards: repeat(auto-fill, minmax(250px, 1fr)) cria uma galeria que reflui de 4 colunas para 1 conforme a viewport encolhe — zero breakpoints.
  • Projetos Tailwind: a aba Tailwind gera grid-cols-*, col-span-* e valores arbitrários como grid-cols-[200px_1fr], prontos para colar em componentes React, Vue ou Svelte.
  • Layouts editoriais/revista: combine um hero de largura total com colunas assimétricas usando o preset Magazine e ajuste os spans por bloco.

Erros Comuns com CSS Grid

  • Usar auto-fit quando queria auto-fill: com poucos itens, auto-fit estica todos pela linha inteira — um único card pode ocupar o container todo. Use o laboratório abaixo do canvas para comparar antes de decidir.
  • Áreas nomeadas não retangulares: grid-template-areas exige que cada área forme um retângulo. Uma área em "L" invalida silenciosamente o template inteiro e o browser cai no posicionamento automático.
  • Confundir fr com %: 1fr é uma fração do espaço que sobra, enquanto 33% é fração do container total — porcentagens combinadas com gap causam overflow; fr desconta os gaps automaticamente.
  • Spans maiores que o número de tracks: um item com col-span-4 em um grid de 3 colunas força uma quarta coluna implícita. O gerador limita os spans ao número de colunas no preview para deixar isso visível.

Perguntas Frequentes

Qual a diferença entre auto-fill e auto-fit no CSS Grid?

Ambos criam tantos tracks quanto couberem no container com repeat(). A diferença aparece quando os itens não preenchem a linha: auto-fill mantém os tracks vazios, preservando tamanhos consistentes, enquanto auto-fit colapsa os tracks vazios e os itens existentes esticam para preencher o espaço. Use auto-fit em galerias que devem sempre ocupar a largura toda; use auto-fill quando a consistência dos tamanhos importa mais.

O que é a unidade fr no CSS Grid?

A unidade fr (fração) representa uma fração do espaço disponível após os tracks de tamanho fixo serem posicionados. Por exemplo, grid-template-columns: 200px 1fr 1fr em um container de 800px resulta em 200px, 300px e 300px. Diferente de porcentagens, fr opera sobre o espaço restante e desconta os gaps, sendo mais confiável ao misturar tracks fixos e flexíveis.

Como fazer um grid responsivo sem media queries?

Use grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)). Isso cria tantas colunas de no mínimo 250px quanto couberem no container e ajusta a quantidade automaticamente conforme a viewport muda — 4 colunas no desktop, 2 no tablet, 1 no mobile, sem nenhuma media query. O laboratório auto-fill vs auto-fit deste gerador permite testar o padrão ao vivo.

Como funciona grid-template-areas?

Define o layout como um mapa visual de texto: cada string entre aspas é uma linha, cada palavra é uma área nomeada e o ponto (.) marca célula vazia. Os elementos são atribuídos com grid-area: nome. A restrição é que toda área precisa ser retangular — repita o nome em células vizinhas para uma área ocupar várias colunas ou linhas. O modo Áreas Nomeadas deste gerador monta o template enquanto você digita os nomes nas células.

Posso exportar o grid como classes Tailwind?

Sim — a aba Tailwind converte sua configuração em classes utilitárias em tempo real: grid-cols-3, gap-4, col-span-2 e assim por diante. Tracks personalizados viram valores arbitrários como grid-cols-[200px_1fr_200px], e áreas nomeadas usam a sintaxe de propriedade arbitrária do Tailwind ([grid-area:header]) — até layouts complexos funcionam sem mexer na config do Tailwind.

Recursos

Ferramentas Relacionadas