Gerador de CSS Grid

Crie layouts CSS Grid visualmente. Defina linhas, colunas, espaçamentos e copie o CSS e HTML resultantes. Perfeito para prototipar layouts complexos.

Colunas: 3

Linhas: 3

Espaço entre colunas: 8px

Espaço entre linhas: 8px

Modelo de colunas

Pré-visualização

CSS

Funcionalidades

Configuração de linhas e colunas

Redimensionar arrastando

Fusão de células

Controlo do espaçamento

Gera CSS e HTML

Como Usar

1. Defina o número de linhas e colunas.

2. Ajuste alturas das linhas e larguras das colunas (fr, px, auto).

3. Defina o espaçamento do grid.

4. Copie o CSS e HTML gerados.

Sobre esta ferramenta

O CSS Grid organiza o conteúdo em linhas e colunas ao mesmo tempo, o que o torna a escolha natural para galerias, dashboards e estruturas de página. Este gerador monta um contêiner grid visualmente: escolha quantas colunas e linhas precisa, o espaço entre elas e como as colunas dividem o espaço — frações iguais com 1fr, tamanho automático, minmax(0, 1fr) para impedir que conteúdo longo alargue uma coluna, ou trilhas fixas de 100px. A prévia mostra como os itens fluem pelas trilhas, e o CSS é escrito com repeat() para um resultado compacto e legível. Copie-o como ponto de partida e depois posicione cada item com grid-column e grid-row na sua própria folha de estilos.

Perguntas Frequentes

O que significa a unidade fr?

fr representa uma fração do espaço livre do contêiner grid. Três colunas de 1fr dividem o espaço igualmente, enquanto 2fr 1fr dá à primeira coluna o dobro da largura da segunda.

Por que usar minmax(0, 1fr) em vez de 1fr?

Uma trilha de 1fr não consegue encolher abaixo do tamanho mínimo do seu conteúdo, então uma palavra longa ou uma tabela larga podem esticar a coluna. minmax(0, 1fr) deixa a coluna encolher, o que mantém colunas iguais realmente iguais.

Como deixo um grid responsivo?

Um padrão comum é grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)), que encaixa quantas colunas de no mínimo 240px a largura permitir e joga o restante para novas linhas, sem media queries.

Como faço um item ocupar várias colunas?

Adicione grid-column: span 2 ao item para cobrir duas colunas, ou grid-column: 1 / -1 para esticá-lo por toda a largura. grid-row funciona da mesma forma para linhas.

Qual a diferença entre gap, column-gap e row-gap?

column-gap define o espaço entre colunas, row-gap o espaço entre linhas e gap é o atalho para os dois. Os espaçamentos existem só entre as trilhas, não em volta da parte externa do grid.