O que é o Gerador de CSS Grid?
O Gerador de CSS Grid é uma ferramenta visual para montar layouts com CSS Grid sem escrever o código na mão. Você desenha o layout em um canvas de grid interativo, e o CSS e o HTML correspondentes se atualizam em tempo real, prontos para copiar no seu projeto.
Tudo fica em um único painel: colunas, linhas, gaps, alinhamento e áreas de template nomeadas. Comece a partir de um modelo testado ou do grid padrão 3×3, pinte as regiões com um clique ou arraste e leia um código limpo e dentro dos padrões enquanto trabalha — sem precisar decorar a sintaxe do grid.
Para quem é?
Serve para qualquer pessoa que trabalha com layout:
- Desenvolvedores web que prototipam layouts de grid rapidamente
- Designers que transformam ideias de layout em código CSS real
- Estudantes que aprendem como as propriedades do CSS Grid se encaixam
- Qualquer pessoa que quer um código de grid organizado sem escrevê-lo do zero
Como usar o Gerador de CSS Grid
Escolha um ponto de partida
Escolha um dos cinco Modelos — Holy Grail, Sidebar, Dashboard, Galeria ou Header-Footer — ou comece do grid padrão 3×3. Cada modelo configura na hora as colunas, as linhas e as áreas de template.
Configure a estrutura do grid
Na Configuração do grid, use + e − para adicionar ou remover colunas e linhas (de 1 a 12). Edite cada valor de trilha direto — digite 1fr, 200px, auto ou qualquer valor CSS válido — e defina o gap de linha e o gap de coluna de forma independente.
Pinte as áreas de template
Selecione uma área na lista (ou use Adicionar área para criar uma) e clique ou arraste nas células da prévia para atribuí-las. Clique de novo em uma célula pintada com a mesma área selecionada para apagá-la. Cada área ganha uma cor própria, deixando o layout fácil de ler.
Ajuste o alinhamento
Refine o posicionamento na seção Alinhamento usando justify-items, align-items, justify-content e align-content. Só os valores diferentes do padrão aparecem no código gerado.
Copie o código
Alterne entre as abas CSS e HTML para ver o resultado gerado e clique em Copiar para enviar o código visível para a área de transferência.
Recursos
Canvas visual de grid
Uma prévia interativa reflete exatamente as larguras das colunas, as alturas das linhas e os gaps. Clique e arraste as células para definir regiões nomeadas.
Cinco modelos prontos
Comece rápido com Holy Grail, Sidebar, Dashboard, Galeria ou Header-Footer — cada um já configura as trilhas e as áreas de template.
Valores de trilha flexíveis
Cada coluna e linha aceita qualquer valor CSS: unidades fr, px, auto, porcentagens ou minmax().
Controles de gap independentes
Defina o gap de linha e o gap de coluna separadamente em pixels, com o canvas atualizando ao vivo conforme você muda os valores.
Áreas de template nomeadas
Pinte células para criar regiões com cores e adicione ou remova áreas dinamicamente. A ferramenta escreve o CSS grid-template-areas corretamente.
Opções completas de alinhamento
Configure as quatro propriedades de alinhamento com grupos de botões; os valores padrão são automaticamente deixados de fora da saída.
Saída de CSS e HTML limpa
Tenha um .grid-container pronto para uso com as classes de área correspondentes, além de uma estrutura de marcação HTML na aba HTML.
Cópia com um clique
Copie o CSS ou o HTML visível para a área de transferência com um único botão, prontos para colar direto no seu projeto.
Pintura por toque
O canvas funciona em celulares e tablets — toque e arraste para atribuir áreas em uma tela sensível ao toque.
Modo escuro
As cores, as bordas e o bloco de código se adaptam automaticamente para um uso confortável em qualquer iluminação.
Perguntas frequentes
Quais valores de trilha eu posso usar?
Qualquer valor de trilha válido do CSS Grid: 1fr, 200px, auto, 50%, min-content, max-content ou funções como minmax(200px, 1fr) e repeat(3, 1fr). Os campos de trilha são texto livre, então você pode misturar unidades entre colunas e linhas.
Como funcionam as áreas de template?
As áreas de template dão nomes a regiões do grid. Selecione uma área na lista e clique ou arraste nas células do canvas para pintá-las. O gerador escreve a propriedade grid-template-areas junto com uma classe correspondente para cada área, então a marcação e o CSS ficam alinhados.
Posso deixar células sem área?
Sim. As células não pintadas aparecem como um ponto (.) no valor de grid-template-areas gerado, que é a sintaxe válida do CSS Grid para uma célula vazia.
Por que as propriedades de alinhamento não aparecem no CSS?
O gerador só inclui na saída os valores de alinhamento diferentes do padrão, para manter o código limpo. justify-items: stretch e align-items: stretch são os padrões do CSS Grid, assim como justify-content: start e align-content: start, então eles são omitidos. Mude qualquer um deles para um valor diferente e ele passa a aparecer na saída.
Qual é o tamanho máximo do grid?
Você pode criar grids de até 12 colunas × 12 linhas (144 células), o que cobre a grande maioria dos layouts do mundo real.
Qual é a diferença entre CSS Grid e Flexbox?
O CSS Grid é um sistema bidimensional: você controla colunas e linhas ao mesmo tempo, o que é ideal para layouts de página inteira e regiões nomeadas. O Flexbox é unidimensional, distribuindo os itens ao longo de uma única linha ou coluna. Esta ferramenta foca no Grid; use o Flexbox quando você só precisa distribuir itens ao longo de um eixo.
Funciona no celular?
Sim. O layout se adapta a telas menores e o canvas suporta pintura por toque — toque e arraste para atribuir áreas em celulares e tablets.
Meus dados ficam armazenados em algum lugar?
Não. Tudo roda no seu navegador, e nenhuma configuração de grid ou código gerado é enviado para um servidor.
Ainda não há comentários. Seja o primeiro a comentar!