Design · Grátis

Gerador CSS Grid

Crie uma prévia de grade e CSS a partir de colunas, linhas e espaçamento.

01Insira os valores

Funciona no navegador

—

Funciona no navegador

Crie uma prévia de grade e CSS a partir de colunas, linhas e espaçamento.

Funciona no navegador

Os dados são processados nesta página e não são enviados a um servidor.

Sobre esta ferramenta

Crie CSS Grid de colunas iguais e adapte o código à sua página.

Insira os valores
Colunas · Linhas · Espaçamento
Calcular / gerar
Crie uma prévia de grade e CSS a partir de colunas, linhas e espaçamento.
Resultado
display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(80px, auto)); gap: 16px;

Crie CSS Grid de colunas iguais e adapte o código à sua página.

Exemplo prático

Resultado

display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
grid-template-rows: repeat(2, minmax(80px, auto));
gap: 16px;

Como interpretar o resultado?

Crie CSS Grid de colunas iguais e adapte o código à sua página.

Para onde vão meus dados?

Os cálculos ocorrem no seu dispositivo. Os dados não são enviados a um servidor.