Gerador de CSS Grid
Defina colunas, linhas e espaço entre elas e copie o CSS do container grid.
- Roda no seu navegador
Resultado
O resultado aparece aqui.
Colunas fixas ou automáticas
| Modo | Resultado |
|---|---|
| Número fixo | repete a coluna escolhida (em fr, px, % ou auto) o número de vezes pedido |
| Automático (auto-fit) | usa o tamanho como largura mínima em px e coloca quantas colunas couberem; as vazias encolhem |
| Automático (auto-fill) | igual ao anterior, mas mantém as colunas vazias ocupando espaço |
Uma fração (fr) divide o espaço que sobra; px e % são fixos. No modo automático o número de colunas e a unidade são ignorados.
Resultados de referência: CSS Grid
| Escolhas | CSS gerado |
|---|---|
| 3 colunas de 1fr, uma linha | display: grid; grid-template-columns: repeat(3, 1fr); |
| automático (auto-fit), mínimo de 200px, espaço de 16 | display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; |
| 2 colunas de 240px, 2 linhas de 120px, espaço de 8 | display: grid; grid-template-columns: repeat(2, 240px); grid-template-rows: repeat(2, 120px); gap: 8px; |
Uma única linha em auto é o comportamento padrão do grid, então a declaração das linhas só aparece quando muda algo.
O que fica de fora: CSS Grid
- Trilhas todas iguais: não há colunas de tamanhos diferentes, minmax() personalizado, áreas nomeadas nem posicionamento dos filhos.
- No modo automático, o tamanho mínimo da coluna padrão (1px) gera uma quantidade enorme de trilhas: ajuste-o para a largura mínima que você quer em cada coluna.
Perguntas frequentes
Como fazer um gerador css grid responsivo?
Escolha o modo automático (auto-fit) e um tamanho mínimo de coluna. Com 200 e espaço de 16 o resultado é: display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px;
Como funciona o css grid layout com auto-fit e auto-fill?
Os dois colocam quantas colunas couberem. O auto-fit encolhe as colunas vazias e distribui o espaço entre as que têm conteúdo; o auto-fill as mantém.