Gerador de CSS Grid
Escolha as colunas, as linhas e o espaço entre elas, ou use o modo responsivo para os cartões se reorganizarem sozinhos conforme a tela. A prévia mostra o resultado na hora.
Layout com CSS Grid
Arraste o canto da prévia para testar larguras. Toque num item para ele ocupar 2 colunas.
Disponível em: 
Gerador de CSS Grid: para que serve
Escolha colunas fixas (com atalhos para 2, 3 e 4 colunas, conteúdo com lateral e menu com conteúdo) ou o modo responsivo, em que as colunas se ajustam à largura com repeat(auto-fit, minmax()). Defina o número de itens e o espaço entre eles.
Toque num item da prévia para ele ocupar duas colunas e arraste o canto da prévia para testar larguras. O CSS e o HTML ficam prontos para copiar.
Como usar
- Escolha o modo e as colunas.
- Defina itens e espaço; toque em itens para ocupar 2 colunas.
- Copie o CSS e o HTML.
Quando usar
- Grades de cartões, produtos e fotos.
- Layouts com barra lateral.
- Aprender CSS Grid vendo o resultado.
Perguntas frequentes
O que significa 1fr?
Uma fração do espaço que sobra. Três colunas 1fr 1fr 1fr dividem a largura em partes iguais; 2fr 1fr faz a primeira coluna ter o dobro da segunda.
O que faz repeat(auto-fit, minmax(220px, 1fr))?
Cria quantas colunas couberem, cada uma com no mínimo 220px, e estica as colunas para ocupar a linha toda. É o jeito mais simples de fazer uma grade de cartões responsiva sem media queries.
Como fazer um item ocupar duas colunas?
Use grid-column: span 2 no item. Na prévia, toque num item para alternar entre ocupar 1 ou 2 colunas e o CSS é atualizado.
É grátis mesmo?
Sim, 100% grátis. Sem cadastro, sem assinatura e sem limite de uso. Todas as ferramentas do Ferramentas123 são gratuitas e rodam direto no seu navegador.