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
Revisado por Rafael Duarte
<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>Clique em um item no canvas para editar seus spans de coluna e linha.
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.
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));Como usar
Do grid em branco ao código em menos de um minuto
1. Escolha um preset ou defina os tracks
Holy Grail, Dashboard, Card Grid — ou arraste os sliders de Colunas e Linhas.
2. Ajuste itens ou áreas nomeadas
Modo Spans: clique num item para col-span/row-span. Modo Áreas: digite nomes na matriz.
3. Copie o código
Tailwind, CSS, HTML ou Responsivo (media queries mobile-first geradas automaticamente).
O que esta ferramenta faz
Saída dupla, editor visual de áreas nomeadas
CSS e Tailwind simultâneos
Algo que nenhum outro grid generator oferece na mesma tela.
Editor de grid-template-areas
Digite nomes direto na matriz e o layout se reorganiza ao vivo.
Laboratório auto-fill vs auto-fit
A parte mais confusa do CSS Grid, explicada na prática com demo interativa.
Aba Responsivo
Gera media queries mobile-first automaticamente a partir da sua configuração.
Alinhamento com justify-items e align-items
Ajuste o alinhamento dos itens dentro das células — stretch, start, center ou end — direto no painel, sem escrever CSS na mão.
Posicionamento explícito com col-start/row-start
Além dos spans, defina em qual coluna e linha exata um item começa — útil para pular ou sobrepor células de propósito.
Exemplos
Quando você vai usar isso
Os cenários mais comuns entre quem usa a ferramenta
Layouts de página (Holy Grail)
Header, footer e três colunas no meio — o preset gera tudo na hora.
Dashboards
Sidebar fixa mais conteúdo flexível — áreas nomeadas mantêm o CSS legível conforme cresce.
Galerias de produtos/cards
auto-fill + minmax cria uma galeria que reflui de 4 colunas para 1 sem breakpoints.
Projetos Tailwind
A aba Tailwind gera grid-cols-*, col-span-* e valores arbitrários prontos para React/Vue/Svelte.
Layouts editoriais/revista
O preset Magazine combina um hero de largura total com colunas assimétricas — ideal para blogs e páginas de conteúdo.
Sistemas de grid de 12 colunas
O preset 12-Column replica a grade clássica de frameworks de design, com cada item ocupando uma fração da largura total.
Erros comuns
Áreas nomeadas não retangulares
Uma área em "L" invalida silenciosamente o template inteiro e o browser cai no posicionamento automático.
Confundir fr com %
1fr é fração do espaço que sobra; % é fração do total — misturar % com gap causa overflow.
Span maior que o número de tracks
col-span-4 num grid de 3 colunas força uma quarta coluna implícita.
Usar auto-fit quando o objetivo era auto-fill
Com poucos itens, auto-fit estica os existentes para preencher a linha toda — um único card pode acabar ocupando o container inteiro sem aviso nenhum.
Por que usar esta ferramenta
O editor visual de grid-template-areas e o laboratório auto-fill vs auto-fit tornam concretas as duas partes do CSS Grid que mais confundem desenvolvedores.
A aba Responsivo gera media queries mobile-first automaticamente — você não precisa escrever os breakpoints manualmente depois de montar o layout.
Diferente do Flexbox, que organiza itens em uma única direção, o CSS Grid controla colunas e linhas ao mesmo tempo. Por isso a ferramenta cobre desde o layout inteiro da página até o alinhamento fino de um único item, tudo no mesmo lugar.
auto-fill vs. auto-fit
A confusão mais comum do CSS Grid
Perguntas frequentes
Ambos criam tantos tracks quanto couberem com repeat(). Quando os itens não preenchem a linha, auto-fill mantém tracks vazios; auto-fit os colapsa e estica os itens existentes.
Referências
Artigo relacionado
Como criar layouts responsivos sem frameworks (CSS puro em 2026)
Ferramentas Relacionadas
- Verificador de Contraste de Cores Design Verificador de contraste de cores grátis — verifique conformidade WCAG 2.2 AA e AAA instantaneamente. Preview ao vivo, simulação de daltonismo e sugestões...
- Conversor de Cores Design Converta cores entre HEX, RGB, HSL e CMYK instantaneamente. Ferramenta gratuita com seletor de cores, verificador de contraste WCAG e gerador de paletas.
- Gerador de Paleta de Cores Design Gere paletas de cores harmoniosas a partir de qualquer cor base. Escolha harmonia Análoga, Complementar, Triádica ou Tetrádica — exporte como CSS variables...
- Gerador de Paleta de Cores por Imagem Design Extraia paletas de cores de qualquer imagem — obtenha códigos HEX, RGB, HSL e exporte como CSS variables, Tailwind, JSON ou PNG. 100% no browser, sem upload.
- Gerador CSS Box Shadow — Neumorfismo, Glassmorfismo e Tailwind Design Gerador CSS box shadow grátis com preview em tempo real. Crie sombras, efeitos neumorfismo e glassmorfismo. Exporte para CSS, Tailwind ou variáveis CSS.
