Gerador de CSS Grid
Monte um layout de CSS Grid visualmente com pré-visualização ao vivo e copie o CSS gerado — defina colunas, linhas, tamanhos de faixa, espaçamentos e alinhamento.
O Gerador de CSS Grid é uma ferramenta gratuita e visual para criar layouts com CSS Grid sem escrever código na mão. Defina a quantidade de colunas e linhas, escolha o tamanho de cada faixa (fr, px, % ou auto), ajuste o espaçamento entre linhas e colunas e altere o alinhamento dos itens — e veja uma grade de pré-visualização atualizar em tempo real. Quando estiver do jeito certo, copie o CSS com display: grid e cole direto no seu arquivo de estilos.
O que é um gerador de CSS Grid?
O CSS Grid é um sistema de layout bidimensional que organiza elementos em linhas e colunas. Um gerador de CSS Grid oferece campos e seletores para as propriedades da grade — grid-template-columns, grid-template-rows, gap, justify-items e align-items — e transforma suas escolhas em CSS pronto para uso. Em vez de decorar a sintaxe, você ajusta os controles, vê o resultado na hora e copia o código.
Como usar o gerador de CSS Grid
Criar um layout em grade leva poucos passos:
- Defina o número de colunas e de linhas que deseja.
- Escolha o tamanho da faixa para colunas e linhas: fr (fração flexível), px (fixo), % (porcentagem) ou auto.
- Ajuste o espaço entre linhas e o espaço entre colunas para criar o espaçamento das células.
- Escolha como os itens se alinham com justify-items (horizontal) e align-items (vertical).
- Copie o CSS gerado e aplique no elemento contêiner.
O que significa fr em grid-template-columns?
A unidade fr representa uma fração do espaço livre disponível no contêiner da grade. repeat(3, 1fr) cria três colunas que ocupam partes iguais da linha, crescendo e encolhendo junto com o contêiner. Misturar unidades é comum em layouts reais — por exemplo, uma barra lateral fixa em px ao lado de um conteúdo flexível em fr — mas o fr é a escolha padrão para faixas responsivas e distribuídas igualmente.
Qual a diferença entre gap, justify-items e align-items?
O gap controla o espaçamento entre linhas e colunas (você pode definir um único valor ou valores separados para linhas e colunas). O justify-items posiciona cada item no eixo da linha (inline) dentro da célula, enquanto o align-items o posiciona no eixo da coluna (block). Definir ambos como stretch preenche a célula; start, center e end posicionam o item sem esticá-lo.
Por que usar este gerador de CSS Grid?
- 100% gratuito, sem anúncios, cadastro ou limites.
- A grade de pré-visualização atualiza instantaneamente a cada mudança.
- Gera um CSS limpo e padrão que você copia com um clique.
- Suporta tamanhos de faixa fr, px, % e auto, além de espaçamentos separados para linhas e colunas.
- Roda inteiramente no seu navegador — nada é enviado para servidores.
- Ótimo para aprender como as propriedades do CSS Grid afetam um layout.
Perguntas frequentes
O gerador de CSS Grid é gratuito?
Sim. Todas as ferramentas do ToolsSoup são totalmente gratuitas, sem conta, cadastro ou limites ocultos.
O CSS gerado funciona em todos os navegadores?
Sim. O CSS Grid é compatível com todos os navegadores modernos, então o código com display: grid que esta ferramenta produz funciona em qualquer versão atual de Chrome, Firefox, Safari e Edge.
Posso criar grades responsivas?
Usar a unidade fr torna colunas e linhas flexíveis para que redimensionem com o contêiner. Para layouts específicos por breakpoint, copie a grade base daqui e envolva-a nas suas próprias media queries.
Meus dados são enviados para algum lugar?
Não. O gerador roda inteiramente no seu navegador, então nada do que você configura é enviado ou armazenado em servidores.