Sobre esta ferramenta
O Gerador de CSS Grid cria uma grelha bidimensional de faixas iguais. Os números de linhas e colunas são inteiros entre 1 e 12. A quantidade de elementos corresponde ao produto dos dois valores, até um máximo de 144.
Como utilizar
- Introduza os números de Colunas e Linhas, ambos inteiros entre 1 e 12.
- Ajuste o Espaçamento entre colunas e o Espaçamento entre linhas.
- Observe a grelha e os elementos numerados gerados em tempo real.
- Copie o CSS e aplique-o ao contentor de grelha do projeto.
Exemplos de utilização
- 3 colunas × 2 linhas apresentam 6 elementos.
- 12 colunas × 12 linhas atingem o limite de 144 elementos desta página.
- Defina 24px entre colunas e 12px entre linhas para comparar o espaço nas duas direções.
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 1fr);
gap: 16px;
}Funcionamento e explicação do CSS
repeat(n, 1fr) cria n faixas iguais; 1fr recebe uma parte do espaço disponível no contentor. column-gap e row-gap definem os espaçamentos entre colunas e linhas. Quando são iguais, pode usar-se a abreviação gap.
Utilizações comuns
- Criar listas de cartões e galerias de imagens.
- Planear painéis com áreas de tamanho uniforme.
- Aprender as funções de repeat(), fr e gap.
Privacidade
O processamento das entradas, os cálculos, a geração de CSS e as pré-visualizações decorrem no seu navegador. O conteúdo nunca é enviado para um servidor. Não são usados backend, base de dados, API online ou CDN de terceiros, nem as suas entradas são guardadas automaticamente.
FAQ
Qual é a diferença entre CSS Grid e Flexbox?
Grid permite controlar linhas e colunas numa disposição bidimensional. Flexbox distribui os elementos sobretudo ao longo de um eixo principal.
O que significa 1fr?
fr representa uma fração do espaço disponível restante. Quando todas as faixas usam 1fr, o espaço é normalmente repartido em partes iguais.
O que significa repeat(3, 1fr)?
Equivale a 1fr 1fr 1fr e define três faixas iguais.
Qual é a diferença entre gap e margin?
gap controla os intervalos entre faixas sem acrescentar espaço no exterior do contentor. margin é a margem exterior do próprio elemento.
Porque estão as linhas e colunas limitadas a 12?
O limite de 12 em cada direção mantém a pré-visualização dentro de 144 elementos e evita que valores enormes tornem a página lenta.