Gerador visual de CSS Grid online
Gere CSS Grid visualmente (colunas, linhas, gap), direto no seu navegador.
1fr = equal fraction of space. Adapt to your needs (px, %, auto…).
🔒 100 % no cliente — nenhum dado enviado
Crie visualmente seu layout CSS Grid definindo colunas, linhas e gap, depois copie o código gerado. A pré-visualização atualiza ao vivo, 100% no seu navegador, sem cadastro. Ideal para prototipar layouts complexos sem escrever todo o CSS manualmente.
What is it for?
- ▸ Definir uma grade de colunas e linhas com grid-template
- ▸ Definir o espaçamento entre células com a propriedade gap
- ▸ Prototipar uma galeria ou dashboard com CSS Grid
- ▸ Aprender CSS Grid vendo o efeito de cada configuração
FAQ
Como crio um CSS Grid responsivo?
Defina suas colunas com unidades flexíveis como fr e minmax no gerador; ele produz o grid-template-columns correspondente para você copiar para seu CSS.
Devo usar CSS Grid ou Flexbox?
Grid é adequado para layouts bidimensionais (colunas e linhas), enquanto Flexbox é ideal para alinhar ao longo de um único eixo; eles costumam ser combinados.
O que a propriedade gap faz em uma grid?
A propriedade gap define o espaço entre colunas e linhas da grid sem adicionar margens nas bordas; a pré-visualização mostra o resultado em tempo real.