Gerador CSS Grid
Crie layouts de grade visualmente — configure colunas, linhas e espaçamentos, desenhe elementos clicando ou arrastando.
① Defina colunas & linhas e tamanhos de track ② Clique em células para adicionar items e arraste para span ③ Copie o CSS
Colunas
Linhas
Espaço colunas (px)
16
Espaço linhas (px)
16
Col
C1
C2
C3
Linha
R1
R2
R3
Preview
CSS gerado
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
column-gap: 16px;
row-gap: 16px;
}Como usar CSS Grid
CSS Grid é um sistema de layout bidimensional que controla colunas e linhas simultaneamente. Use unidades fr para distribuir espaço proporcionalmente, px para tamanhos fixos, % para relativos e auto para ajustar ao conteúdo. A propriedade gap adiciona espaçamento uniforme. Defina itens com grid-column e grid-row usando números de linha start / end.
Perguntas frequentes
CSS Grid Layout é um sistema de layout bidimensional integrado aos navegadores. Ao contrário do Flexbox (que funciona em um eixo), Grid permite definir linhas e colunas explícitas e posicionar itens precisamente em qualquer lugar da grade.
fr significa "unidade fracionária". Representa uma fração do espaço disponível no contêiner grid. Por exemplo, grid-template-columns: 1fr 2fr 1fr cria três colunas onde a do meio é duas vezes mais larga que as outras.
Use auto quando quiser que uma coluna ou linha se ajuste ao seu conteúdo. Use fr para preencher o espaço restante proporcionalmente. Combinando — ex. auto 1fr — cria uma barra lateral que se adapta ao conteúdo.
gap é a abreviação para ambos. gap: 16px define ambos iguais, gap: 16px 24px define row-gap primeiro. Substituem o antigo grid-gap agora depreciado.
grid-column: 1 / 3 posiciona um item da linha 1 à linha 3, abrangendo 2 colunas. Alternativamente, grid-column: span 2 abrange 2 colunas da posição atual. Este gerador usa a sintaxe start / end.
Sim. CSS Grid é suportado em todos os navegadores modernos desde 2017 (Chrome 57, Firefox 52, Safari 10.1, Edge 16). Pode ser usado em produção sem fallbacks.
Este gerador suporta até 12 colunas e 8 linhas, cobrindo a grande maioria dos layouts reais. O CSS em si não tem limite fixo.