Gerador CSS Grid
Pré-visualização ao vivo
Por que usar um gerador visual de CSS Grid?
CSS Grid é o sistema de layout mais poderoso em CSS, mas sua sintaxe — grid-template-columns, grid-template-rows, unidades fr, minmax(), repeat() — tem uma curva de aprendizado íngreme. Nosso gerador visual permite configurar sua grade via controles deslizantes e dropdowns e ver o layout atualizar instantaneamente, para que você entenda o efeito de cada propriedade sem precisar mergulhar na documentação do MDN.
Pré-visualização de grade ao vivo
Veja sua grade atualizar em tempo real enquanto ajusta colunas, linhas, espaçamento e alinhamento
Suporte a unidades fr
Os templates usam unidades fracionárias (fr) para grades flexíveis e responsivas que se adaptam ao tamanho do contêiner
Saída CSS pronta para uso
Exporta um bloco CSS .container limpo com grid-template-columns, rows, gap e align-items
Como criar um layout CSS Grid
Defina colunas e linhas
Use os controles deslizantes para estabelecer o número de colunas e linhas da sua grade
Escolha template e espaçamento
Selecione um template de colunas (igual, fixo+flex, minmax responsivo) e ajuste o espaçamento entre células
Copie o CSS
Clique em 'Copiar CSS' para o bloco CSS completo pronto para colar em sua folha de estilos
Casos de uso do CSS Grid
Layouts de página
Construa estruturas cabeçalho/barra lateral/conteúdo principal/rodapé com áreas de grade nomeadas
Painéis de controle
Crie layouts de painel complexos com cartões de tamanhos diferentes via grid-column e grid-row spans
Galerias de imagens
Construa galerias de imagens tipo alvenaria ou uniformes com auto-fill e minmax para responsividade
Layouts de revista
Crie layouts editoriais com colunas assimétricas e elementos em destaque abrangendo várias células
Boas práticas do CSS Grid
✓ Prefira unidades fr a porcentagens
A unidade fr (fração) distribui o espaço disponível após colunas de tamanho fixo, sem calcular manualmente porcentagens para colunas flexíveis.
✓ Use minmax() para grades responsivas
repeat(auto-fill, minmax(250px, 1fr)) cria uma grade responsiva que ajusta automaticamente o número de colunas — sem media queries.
✓ Use áreas de grade nomeadas
grid-template-areas com células nomeadas (header, sidebar, main, footer) torna layouts de página legíveis e fáceis de modificar.
✓ Entenda auto-fill vs auto-fit
auto-fill cria o máximo de trilhas possível (deixando trilhas vazias). auto-fit colapsa trilhas vazias e expande itens existentes — geralmente melhor para grades de cartões.
❓ Perguntas frequentes
O que é uma unidade fr em CSS Grid?
fr significa 'unidade fracionária'. 1fr representa uma fração do espaço livre disponível no contêiner de grade. repeat(3, 1fr) cria 3 colunas iguais que compartilham igualmente todo o espaço disponível.
Como CSS Grid difere do Flexbox?
Flexbox é unidimensional — dispõe itens ao longo de um único eixo (linha ou coluna). CSS Grid é bidimensional — controla linhas e colunas simultaneamente, tornando-o muito mais poderoso para layouts de página.
O que faz minmax()?
minmax(min, max) define um intervalo de tamanho para uma trilha de grade. minmax(200px, 1fr) significa que uma coluna tem pelo menos 200px de largura mas pode crescer para preencher o espaço disponível — ideal para grades responsivas.
Quando usar CSS Grid em vez de Flexbox?
Use Grid para layouts 2D onde você precisa de controle simultâneo de linhas e colunas. Use Flexbox para layouts de componentes 1D como barras de navegação e linhas de formulário. A maioria dos layouts modernos usa ambos.