Gerador de grid CSS: colunas, linhas e áreas nomeadas

Como usar

Digite as Colunas (tamanhos das trilhas) e as Linhas (tamanhos das trilhas). Para duas colunas, 200px 1fr dá uma barra lateral fixa e uma área principal flexível.
Defina o Espaço entre colunas (px) e o Espaço entre linhas (px), e dê ao contêiner um Nome da classe.
Digite um nome em Nome da área a pintar, deixe Pintar selecionado e clique nas células que pertencem a essa área. Escolha Apagar para limpar células.
Copie a caixa CSS, ou confira a Visualização, antes de colar as regras na sua folha de estilos.

Tamanhos das trilhas e repeat()

Cada trilha é um tamanho na grade: um comprimento em px ou uma porcentagem, um tamanho flexível em fr que divide o espaço que sobra na proporção do seu número, auto, min-content ou max-content. Um minmax(mínimo, máximo) dá à trilha um intervalo. A especificação CSS Grid Layout (em inglês) define como cada uma é dimensionada.

repeat(3, 1fr) escreve a mesma trilha três vezes. repeat(auto-fill, minmax(200px, 1fr)) cria tantas trilhas quantas cabem na largura da caixa. Como essa contagem depende da caixa, cada trilha de uma repetição auto-fill ou auto-fit precisa de um tamanho fixo, e a ferramenta não consegue desenhar áreas nomeadas sobre ela.

grid-template-columns: 200px 1fr;  grid-template-rows: auto 1fr auto;  gap: espaço-entre-linhas espaço-entre-colunas;

Áreas nomeadas

A propriedade grid-template-areas recebe uma string para cada linha da grade. Os nomes de uma string são as células daquela linha, e um ponto representa uma célula que não está em nenhuma área. Cada nome deve preencher um retângulo, porque o navegador não consegue posicionar um nome em forma de L ou em dois blocos separados.

Os nomes são posicionados na grade pelo contêiner, e cada filho ocupa seu lugar com grid-area. A ferramenta escreve uma regra para cada nome, para que o elemento com essa classe preencha as células dele.

Use uma linha de nomes para cada linha de trilhas, com o mesmo número de nomes em cada linha.
Escolha nomes que descrevam a parte da página, como cabeçalho, barra lateral ou principal, porque as regras são escritas com esses nomes como classes.

Exemplo resolvido: uma página com cabeçalho, barra lateral, conteúdo e rodapé

O layout padrão tem duas colunas, de 200px e uma de 1fr flexível, e três linhas: auto para o cabeçalho, 1fr para o meio e auto para o rodapé. O espaçamento é de 16 px nas duas direções. O cabeçalho é pintado pelas duas colunas, a barra lateral e o conteúdo principal dividem a linha do meio, e o rodapé é pintado pelas duas colunas, na parte de baixo.

O CSS começa com .layout { display: grid; grid-template-columns: 200px 1fr; grid-template-rows: auto 1fr auto; gap: 16px; } e depois grid-template-areas com três linhas: "header header", "sidebar main" e "footer footer". Cada nome tem sua própria regra com grid-area, então o elemento do cabeçalho preenche a primeira linha.

Perguntas frequentes

Qual é a diferença entre fr e auto?

Uma trilha fr divide o espaço que sobra depois das trilhas fixas, na proporção do seu número, então 1fr 2fr dá à segunda trilha o dobro da largura da primeira. Uma trilha auto tem a largura que o conteúdo precisa e depois divide qualquer espaço restante.

Por que não posso pintar áreas sobre trilhas auto-fill?

auto-fill e auto-fit decidem o número de trilhas a partir da largura da caixa, então o número de células não é conhecido enquanto você edita. Áreas nomeadas precisam de uma contagem fixa, então a ferramenta pede que você remova auto-fill ou auto-fit quando há áreas pintadas.

Por que cada área tem sua própria regra?

grid-template-areas posiciona os nomes na grade, mas cada item ainda precisa dizer qual célula ocupa, e grid-area faz isso. A ferramenta escreve uma regra para cada nome, usando uma classe de mesmo nome.

O que acontece com as células que não pinto?

Uma célula que não está em nenhuma área é escrita como um ponto em grid-template-areas. Nada é posicionado nela pelas áreas nomeadas, então ela fica vazia, a menos que você coloque um item ali de outra forma.

Quais navegadores aceitam o CSS grid?

O CSS grid é aceito por todos os principais navegadores atuais. Se seus visitantes usam versões antigas, confira o layout nessas versões antes de confiar nas áreas nomeadas.

O meu layout é enviado ou guardado em algum lugar?

Não. A grade, a visualização e o CSS são feitos no seu navegador. Nada é guardado nem enviado para o nosso servidor, então copie o CSS antes de sair da página.

Fontes

Números e texto verificados pela última vez em terça-feira, 10 de novembro de 2026.