Readdy logo

Gerador de CSS Grid

Projete visualmente seu layout CSS Grid — ajuste colunas, linhas e gaps, clique nas células para criar áreas e copie o código

Pré-visualização do Grid

1.1
1.2
1.3
2.1
2.2
2.3
3.1
3.2
3.3

CSS Gerado

.parent {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 10px;
}

Como Usar o Gerador de CSS Grid

CSS Grid é o sistema de layout mais poderoso do CSS. Nosso gerador visual permite projetar layouts complexos ajustando parâmetros e clicando em células para definir áreas — depois copie o código gerado diretamente para o seu projeto.

1

Configure Colunas e Linhas

Escolha quantas colunas e linhas seu grid precisa. Use os campos numéricos para ajustar a estrutura do grid.

2

Defina Tamanhos e Gaps

Defina larguras de coluna e alturas de linha usando qualquer unidade CSS (fr, px, %, auto, etc.). Configure o gap entre as células.

3

Clique para Selecionar Áreas

Clique em células individuais para marcá-las como áreas nomeadas do grid. Cada célula selecionada se torna uma área distinta no CSS gerado.

4

Copie o Código

Clique em "Copiar Código" para obter o CSS gerado. Cole na sua folha de estilos e comece a construir seu layout imediatamente.

Por Que Usar Nosso Gerador de CSS Grid

Pare de escrever código grid à mão. Nossa ferramenta visual facilita o design, pré-visualização e exportação de layouts CSS Grid perfeitos.

  • Interface Visual de Clique

    Veja seu grid ganhar vida em tempo real. Clique em células para definir áreas e veja o CSS ser atualizado instantaneamente.

  • Suporte Completo a Unidades CSS

    Use qualquer unidade CSS válida para colunas, linhas e gaps — fr, px, %, em, auto, minmax(), repeat() e mais.

  • Nomes de Áreas do Grid

    Clique em células para criar áreas de grid nomeadas. O gerador produz código grid-template-areas limpo e fácil de manter.

  • Cópia com Um Clique

    Copie código CSS pronto para produção com um único clique. Sem formatação necessária — cole diretamente no seu projeto.

Perguntas Frequentes

CSS Grid é um sistema de layout bidimensional no CSS que permite organizar elementos em linhas e colunas simultaneamente. É a ferramenta de layout CSS mais poderosa disponível, ideal para estruturas de página complexas.
grid-template-areas permite nomear regiões do seu grid e atribuir elementos a esses nomes. Torna o código de layout legível: em vez de contar números de linhas/colunas, você referencia áreas como 'header', 'sidebar' ou 'main' diretamente.
Você pode usar qualquer unidade CSS válida: fr (unidades fracionais), px, %, em, rem, auto, minmax(), repeat() e mais. A unidade fr é a mais comum para grids porque distribui o espaço disponível proporcionalmente.
Sim, nosso Gerador de CSS Grid é completamente gratuito. Sem registro necessário, sem limites de uso — projete quantos layouts de grid precisar.

Construa Layouts de Grid Perfeitos em Segundos