design
Gratuito
Sem cadastro
Gerador de QR Code
Crie visualmente layouts CSS Grid arrastando itens pelas células e exporte o CSS.
Carregando ferramenta…
Sobre esta ferramenta
Defina colunas e linhas com tamanhos de track personalizados (fr, px, %, auto), defina o espaçamento e clique e arraste na prévia da grade ao vivo para estender itens por múltiplas células. A ferramenta gera declarações grid-template-columns, grid-template-rows, gap e grid-column/grid-row prontas para copiar. Opcionalmente, atribua áreas de grade nomeadas.
Como usar
- 1 Passo 1: Defina o número de colunas (1–12) e linhas (1–8) e o tamanho do espaçamento.
- 2 Passo 2: Insira tamanhos de track para cada coluna e linha usando unidades fr, px, % ou auto.
- 3 Passo 3: Clique e arraste nas células da grade para posicionar e dimensionar itens.
- 4 Passo 4: Copie o CSS gerado e cole-o na sua folha de estilos.