Saltar para o conteúdo principal
LibraTool logoLibraTool

Gerador de CSS Grid grátis

Projete visualmente um CSS grid — faixas, unidades e lacunas — e copie o CSS e HTML gerados.

Funciona offline depois de carregado
Predefinições
Colunas (3)
Linhas (2)
Visualização ao vivo
1
2
3
4
5
6
css
.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto auto;
  column-gap: 16px;
  row-gap: 16px;
}
html
<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
</div>

🔒 Tudo funciona em seu navegador — nada é enviado.

Como funciona

Projete uma grade CSS visualmente: adicione até 8 colunas e 8 linhas, defina cada faixa como fr, px, auto ou min/max-content, e ajuste os espaços de linha/coluna. A pré-visualização numerada ao vivo atualiza instantaneamente e o CSS grid-template gerado mais o HTML correspondente estão a um clique da sua área de transferência.

  1. 1
    Modele a grelha
    Adicione/remova colunas e linhas com + e −.
  2. 2
    Defina as faixas
    Cada coluna e linha recebe a sua própria unidade (1fr, 100px, auto…).
  3. 3
    Ajuste os espaços
    Controlos separados de row-gap e column-gap.
  4. 4
    Copie o código
    CSS pronto para produção e o esqueleto HTML correspondente.

Tudo funciona no seu navegador — nada é carregado.

Ferramentas relacionadas

↔️

Gerador de CSS Flexbox

Experimente a direção flex, ajuste, justify e align em itens ao vivo — e copie o CSS.

Experimentar
📐

Gerador CSS clamp()

Gere um valor CSS clamp() fluido para tipografia e espaçamento responsivos. Defina o tamanho mínimo/máximo e o intervalo de viewport, veja uma pré-visualização ao vivo e copie o CSS em uma linha.

Experimentar
📓

Papel para imprimir — Pautado, quadriculado, pontilhado e pentagrama (PDF)

Imprima seu próprio papel: pautado (largo ou universitário), quadriculado, pontilhado, isométrico, caligrafia, pentagrama ou anotações Cornell, em A4, Carta, A5 ou Ofício, com qualquer cor de linha e quantas páginas precisar. Um PDF vetorial nítido, feito no seu navegador.

Experimentar

Perguntas frequentes