TL
Tool Lab
💰Donate
💰Donate

CSS Grid Generator

Build CSS Grid layouts visually.

1
2
3
4
5
6
.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto;
  column-gap: 16px;
  row-gap: 16px;
  justify-items: stretch;
  align-items: stretch;
  justify-content: start;
}

Sobre esta ferramenta

O Gerador de Grid CSS permite projetar visualmente layouts bidimensionais ajustando grid-template-columns, grid-template-rows, propriedades de gap e configurações de alinhamento. A visualização ao vivo mostra exatamente como seu grid ficará antes de escrever qualquer código.

CSS Grid é o sistema de layout mais poderoso do CSS, projetado para layouts bidimensionais (linhas E colunas simultaneamente). Complementa o Flexbox, que lida com layouts unidimensionais.

Como usar

  1. Defina grid-template-columns para a estrutura de colunas. Use os botões de predefinição para padrões comuns.
  2. Opcionalmente configure grid-template-rows (deixe como auto para a maioria dos layouts).
  3. Ajuste column-gap e row-gap para espaçamento.
  4. Use justify-items e align-items para controlar o posicionamento dos itens nas células.
  5. Mude o número de itens com o controle deslizante para ver como o grid responde.
  6. Clique em Copiar para copiar o CSS gerado.

Casos de uso

Desenvolvedores front-end usam CSS Grid para layouts de página, estruturas de dashboard e galerias de imagens. Designers exportam especificações de grid como CSS exato para compartilhar com desenvolvedores. Equipes de design system usam para prototipar padrões de espaçamento e colunas.

Perguntas frequentes

  • O que significa 1fr? — fr é uma unidade fracional. 1fr significa uma fração do espaço disponível. repeat(3, 1fr) cria três colunas iguais.
  • Quando devo usar Grid vs Flexbox? — Use Grid para layouts bidimensionais (linhas e colunas). Use Flexbox ao dispor itens em uma única direção.
  • CSS Grid é suportado em todos os navegadores? — Sim. CSS Grid é totalmente suportado em todos os navegadores modernos desde 2017.