Gerador CSS Grid
Construa uma grelha CSS (colunas, linhas, gap) ao vivo e copie o CSS.
- Instantânea
- Grátis
- Privada (processada localmente)
- Sem registo
Uma grelha CSS, montada ao vivo
Escolha o número de colunas, linhas e o espaçamento: a pré-visualização mostra as células em tempo real e o CSS do contentor está pronto a copiar.
-
Ajuste as colunas
De 1 a 8 pistas iguais (1fr).
-
Ajuste linhas e gap
Número de linhas e espaçamento.
-
Copie o CSS
Aplique-o ao seu contentor grid.
O CSS do contentor (por defeito)
| Propriedade | Valor |
|---|---|
| display | grid |
| grid-template-columns | repeat(3, 1fr) |
| grid-template-rows | repeat(2, 1fr) |
| gap | 8px |
A unidade 1fr reparte o espaço por igual. Para responsivo, substitua por repeat(auto-fit, minmax(...)). Tudo é gerado localmente.
Perguntas frequentes
Qual a diferença entre CSS Grid e Flexbox?
O Flexbox dispõe os elementos num só eixo (linha ou coluna); o Grid trabalha em duas dimensões (colunas e linhas ao mesmo tempo). O Grid é ideal para layouts completos, o Flexbox para alinhamentos simples.
O que significa repeat(3, 1fr)?
É uma abreviatura de «3 colunas de 1 fração cada». A unidade fr reparte o espaço disponível por igual. Assim, repeat(3, 1fr) cria três colunas da mesma largura que enchem o contentor.
Como torno a grelha responsiva?
Substitua um número fixo por repeat(auto-fit, minmax(200px, 1fr)): as colunas ajustam-se automaticamente à largura. Esta ferramenta gera uma base de número fixo que pode adaptar depois.
O CSS aplica-se ao contentor ou às células?
Ao contentor: display: grid e as propriedades grid-template definem a estrutura. As células-filhas colocam-se sozinhas nas pistas criadas.