Gerador de CSS Grid

Crie layouts CSS Grid visualmente—sem decorar sintaxe. Configure colunas, linhas, gaps, alinhamento, e tamanhos (1fr, auto, minmax). Preview ao vivo e copie CSS limpo.

Container Grid

Colunas3

Linhas2

Gap de Coluna10px

Gap de Linha10px

Tamanho da Coluna

Tamanho da Linha

Justify Items

Align Items

Justify Content

Align Content

Items do Grid: 6

CSS Gerado

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  column-gap: 10px;
  row-gap: 10px;
  justify-items: stretch;
  align-items: stretch;
  justify-content: start;
  align-content: start;
}

Preview ao Vivo

1

2

3

4

5

6

Dica Pro: Use '1fr' pra colunas de largura igual. Grid responsivo sem media queries? Tente 'minmax(250px, 1fr)' com auto-fit ou auto-fill.

Gerador de Layouts CSS Grid & Construtor de Templates

Crie layouts CSS Grid sem escrever código do zero. Este gerador visual permite configurar colunas, linhas, gaps e todas propriedades de alinhamento. Experimente com 1fr, auto e minmax(). Veja seu layout atualizar em tempo real e exporte CSS limpo com grid-template-columns, grid-template-rows e gaps—pronto pra produção.

1Quando usar esta ferramenta?

💡Construir layouts de página responsivos pra websites

💡Criar galerias de cards pra portfolio ou produtos

💡Desenhar layouts de dashboard e painéis admin

💡Prototipar estruturas grid antes de codar

💡Aprender CSS Grid interativamente—veja como propriedades afetam o layout

2Funcionalidades

Construtor visual de layouts grid—não precisa de sintaxe CSS
Preview em tempo real com items numerados
Controle total: colunas, linhas, gaps, todas propriedades de alinhamento
Opções de tamanho: 1fr (fração), auto, minmax() pra grids responsivos
CSS limpo com shorthand grid-template
Funciona offline—100% no cliente, sem upload de dados

3Como usar

Escolha o número de colunas e linhas pro seu layout.
Configure tamanhos de coluna/linha com 1fr (igual), auto, ou minmax() pra responsivo.
Ajuste gaps e alinhamento (justify-items, align-items, etc.).
Veja o preview ao vivo e copie o código CSS gerado.

Perguntas Frequentes

Q. Qual a diferença entre CSS Grid e Flexbox?

A. Grid é 2D (controla linhas E colunas), perfeito pra layouts de página. Flexbox é 1D (linha OU coluna), ideal pra componentes. Use Grid pra estrutura, Flexbox pra alinhar dentro de componentes.

Q. O que significa '1fr' em CSS Grid?

A. '1fr' significa uma fração do espaço disponível. Por exemplo, '1fr 2fr' faz a segunda coluna o dobro de larga. É a chave pra colunas flexíveis de largura igual.

Q. Como faço um grid responsivo sem media queries?

A. Use 'repeat(auto-fit, minmax(250px, 1fr))' ou auto-fill. Isso cria colunas de mínimo 250px que se ajustam automaticamente pra novas linhas em telas menores.

Q. Qual a diferença entre auto-fit e auto-fill?

A. auto-fill cria o máximo de tracks possível, mesmo vazios. auto-fit colapsa tracks vazios pra items se esticarem. Normalmente auto-fit é o que você quer.