Gerador de CSS Grid

Crie layouts CSS Grid visualmente. Defina colunas, linhas, espaçamento e posicionamento de itens com prévia ao vivo.

Como funciona: Defina a estrutura do seu grid com colunas e linhas. Ajuste tamanhos de trilha, espaçamento e posicionamento de itens. Copie o CSS gerado quando seu layout estiver pronto.

3
2
8px
8px
11fr
21fr
31fr
11fr
21fr
Item 1
Item 2
Item 3
Item 4
.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 8px;
}

O que é CSS Grid?

CSS Grid Layout é um sistema de layout bidimensional que permite criar layouts web complexos com linhas e colunas simultaneamente. Diferente do Flexbox que trabalha em uma dimensão, Grid dá controle completo sobre ambos os eixos, sendo perfeito para layouts de página, dashboards e galerias de imagens.

Como Usar o Gerador de Grid

Comece definindo o número de colunas e linhas. Ajuste os tamanhos de trilha usando unidades fr (fracional), px ou auto. Use os controles de gap para adicionar espaçamento entre células. Clique nos itens do grid para fazê-los ocupar múltiplas colunas ou linhas. O CSS gerado atualiza em tempo real — copie quando estiver pronto.

Grid Template Columns e Rows

As propriedades grid-template-columns e grid-template-rows definem os tamanhos de trilha. A unidade fr distribui o espaço disponível proporcionalmente — 1fr 2fr dá à segunda coluna o dobro da largura. Use auto para dimensionamento baseado em conteúdo, minmax() para faixas responsivas e repeat() para padrões repetitivos.

Padrões Comuns de CSS Grid

  • Layout de 12 colunas: repeat(12, 1fr) para máxima flexibilidade
  • Dashboard: sidebar (250px) + main (1fr) com header e footer em largura total
  • Galeria de fotos: auto-fill com minmax(200px, 1fr) para colunas responsivas
  • Layout de blog: 1fr 3fr para sidebar e conteúdo
  • Holy grail: header, corpo de 3 colunas, footer usando grid-template-areas
  • Grid de cards: auto-fit com minmax para cards responsivos iguais