Gerador de Grid CSS
Construtor visual de layout CSS Grid. Personalize colunas, linhas, espaçamento e alinhamento. Copie o código CSS e HTML.
Configurações
Item Properties
Pré-visualização
Código Gerado
Sobre Gerador de Grid CSS
Monte um layout com CSS Grid de forma visual: defina até doze colunas e doze linhas, ajuste os espaçamentos entre linhas e colunas e digite tamanhos de trilha como 1fr, 200px ou auto. Clique em qualquer célula para dar a ela um span com valores explícitos de início e fim em grid-column e grid-row, e a prévia se atualiza enquanto você trabalha, com o CSS e o HTML correspondentes já prontos para copiar. As predefinições partem de layouts comuns, como holy grail, barra lateral, painel e grade de cards. Tudo é renderizado localmente no navegador.
Casos de uso
Como usar
Comece por um layout pronto — Holy Grail, Barra Lateral, Dashboard, Galeria, Blog ou Cards — ou monte um grid do zero.
No painel Configurações, arraste os controles de Colunas e Linhas de 1 a 12 e os de Espaçamento entre Colunas e Espaçamento entre Linhas de 0 a 64px.
Edite as caixas de tamanho de cada coluna e de cada linha para trocar 1fr por valores como 250px, auto ou minmax(200px, 1fr).
Clique em um bloco colorido na Pré-visualização para selecioná-lo e defina Col Início, Col Fim, Linha Início, Linha Fim e Rótulo para que ele ocupe várias células.
Ajuste os dois menus de alinhamento, de justify-items e align-items, entre stretch, start, center e end.
Pegue o resultado em Código Gerado usando o botão CSS, o botão HTML ou Copiar Tudo para levar a marcação e a folha de estilo de uma vez.
Dicas Pro
- Cole o seu conteúdo direto — o Gerador de CSS Grid identifica os padrões de entrada mais comuns e aplica automaticamente as configurações adequadas.
- Use atalhos de teclado (Ctrl/Cmd+A para selecionar tudo, Ctrl/Cmd+C para copiar) para agilizar o seu trabalho no Gerador de CSS Grid.
- Para entradas muito grandes, divida-as em partes — a maioria das abas do navegador aguenta megabytes de texto, mas processar conteúdos enormes pode travar a interface por alguns instantes.
- O Gerador de CSS Grid não registra nem armazena o que você digita. Se precisar de histórico, copie os resultados importantes para um arquivo local ou app de notas.
- Combine o Gerador de CSS Grid com outras ferramentas do site (formatadores, conversores, codificadores) para montar fluxos de dados completos sem sair do navegador.
Perguntas frequentes
Sim, totalmente gratuito, sem cadastro, sem chave de API, sem marcas d'água e sem limites de uso.
Não. O Gerador de CSS Grid roda inteiramente no seu navegador. O que você digita nunca passa pelos nossos servidores.
Não há um limite rígido, mas espere lentidão com entradas maiores que alguns megabytes, dependendo da memória do seu dispositivo.
Sim. Os resultados gerados com o Gerador de CSS Grid são seus para usar livremente em qualquer projeto pessoal ou comercial.
A maior parte da lógica roda em JavaScript no seu navegador, então, depois do carregamento inicial, você costuma conseguir continuar trabalhando sem conexão.
Nenhum. Como o Gerador de CSS Grid roda no seu navegador, você pode processar quantas entradas o seu hardware permitir, sem chaves de API nem restrições.