Design / Layout

Gerador de CSS Grid (Construtor visual de grid-template-areas)

Defina as colunas, linhas e o espaçamento, arraste pelas células para criar áreas nomeadas, como header, sidebar e main, e copie o CSS com grid-template-columns, grid-template-rows e grid-template-areas, pronto para colar.

Gerador de CSS Grid (Construtor visual de grid-template-areas): Os tamanhos das trilhas são escritos conforme você digita, como 200px 1fr 1fr, e tamanhos repetidos se tornam repeat(). Cada área vira um nome em grid-template-areas, com um ponto nas células vazias, além de uma regra que posiciona um elemento com grid-area. As áreas devem ser retangulares e não podem se sobrepor, conforme exigido pelo CSS; o layout é armazenado neste navegador. Roda 100% localmente no seu navegador, sem enviar nenhum arquivo para o servidor.

Categoria
Ferramentas para desenvolvedores
Execuções
No seu navegador
Custo
Grátis · sem cadastro
Disponibilidade
Pronto para usar
Gerador de grid CSSProcessamento local

Roda inteiramente no seu navegador

Arraste pelas células para criar uma área; ela pode abranger várias linhas e colunas. Digite tamanhos de trilha como 1fr, 200px, auto ou minmax(100px, 1fr).

CSS

.grid {
  display: grid;
  grid-template-columns: 200px 1fr 1fr;
  grid-template-rows: auto 1fr auto;
  gap: 16px;
  grid-template-areas:
    "header  header  header"
    "sidebar main    main"
    "footer  footer  footer";
}

.header { grid-area: header; }

.sidebar { grid-area: sidebar; }

.main { grid-area: main; }

.footer { grid-area: footer; }

Dê a cada elemento filho a classe da sua área. As células exibidas como um ponto permanecem vazias.

Áreas nomeadas

Cada string em grid-template-areas é uma linha, e cada palavra é uma célula: "header header" "sidebar main" coloca o cabeçalho nas duas colunas. Um elemento filho com grid-area: main preenche todas as células nomeadas como main. Os nomes não precisam corresponder aos nomes das classes, mas mantê-los iguais facilita a leitura do CSS.

Tamanhos comuns de trilhas

minmax(200px, 1fr) mantém uma coluna com pelo menos 200 px de largura, mas permite que ela cresça; auto ajusta-se ao conteúdo; repeat(auto-fill, minmax(12rem, 1fr)) cria o máximo de colunas que couber, um padrão para grades de cartões. O espaçamento pode ser fluido com o gerador de CSS clamp.

Como usar

  1. Escolha o número de colunas e linhas e informe seus tamanhos.
  2. Arraste pelas células para criar áreas e renomeie-as.
  3. Copie o CSS e atribua a cada elemento filho a classe da sua área.

Privacidade e limitações

O layout é criado no seu navegador.

Ferramentas relacionadas

CSS clamp()Box ShadowFormatador de CSSFlexboxClip path

Perguntas frequentes

O que significa fr?

Uma fração do espaço livre: 1fr 2fr faz com que a segunda coluna tenha o dobro da largura da primeira, depois que os tamanhos fixos e os espaçamentos são descontados.

Por que as áreas não podem se sobrepor nem ter formato de L?

grid-template-areas aceita apenas retângulos, cada um nomeado uma única vez. É possível sobrepor itens no CSS Grid, mas eles precisam de números de linha explícitos em vez de áreas nomeadas.

Como faço para deixar o layout responsivo?

Use o CSS gerado para o layout amplo e redefina grid-template-columns e grid-template-areas dentro de uma media query para telas estreitas.

Ferramenta grátis · no seu navegador execuções · não precisa de conta