ListFan
Arquivo · Grátis

Gerador CSS Grid

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

Esta ferramenta está arquivada. Confira novamente o método e os dados datados antes de usá-la.

01Insira os valores

Funciona no navegador

Funciona offline no navegador. Após carregar a página e os ficheiros necessários, o processamento não precisa de Internet.

Exemplo
px

02Gerador CSS Grid

|

Funciona no navegador

Como funciona

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

Funciona no navegador

Seus dados ficam com você

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

Sobre esta ferramenta

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

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

Usar ferramenta ↑
Como usar
  1. Insira os valores
    • Colunas
    • Linhas
    • Espaçamento
  2. Método de cálculo

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

  3. Exemplo prático · Resultado

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

Método de cálculo

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

Gerador CSS Grid

Colunas
3
Linhas
2
Espaçamento
16 px
Resultado
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
grid-template-rows: repeat(2, minmax(80px, auto));
gap: 16px;

Perguntas frequentes

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.

Termos e definições

Insira os valores

Colunas

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

Introduza um número inteiro, sem frações.

Mínimo: 1 · Máximo: 12

Linhas

Introduza um número inteiro, sem frações.

Mínimo: 1 · Máximo: 12

Espaçamento

Introduza o valor numérico desta grandeza. Use a unidade indicada junto ao campo. px

Mínimo: 0 · Máximo: 100 px

Resultado

Resultado

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

Calculado com os seus dados pelo método abaixo.

Erros comuns e soluções

Gerador CSS Grid

Erro: Usar resultados fora do âmbito descrito.

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

Limites e pressupostos

  • Crie CSS Grid de colunas iguais e adapte o código à sua página.
  • Os resultados podem ser arredondados; isso não aumenta a precisão da medição.

Mais ferramentas

Todas as ferramentas