Propriedade CSS grid-template-areas
Aprenda a usar CSS grid-template-areas para nomear regiões do grid, criar layouts de página visualmente e reorganizá-los com media queries.
A propriedade grid-template-areas permite que você organize um CSS grid visualmente desenhando o layout com nomes em vez de números. Você a aplica a um contêiner de grid e passa uma string entre aspas por linha de grid. Dentro de cada string, você escreve um nome para cada célula de coluna, e células que compartilham o mesmo nome se combinam em uma única área nomeada retangular.
Cada item do grid é então posicionado fazendo referência a um desses nomes com a propriedade grid-area — por exemplo, grid-area: header; coloca esse item onde você escreveu header no template. Como as strings se alinham umas abaixo das outras como uma imagem ASCII, o código-fonte acaba parecendo a página que produz, o que torna layouts complexos muito mais fáceis de ler e reorganizar do que definir manualmente grid-row-start, grid-column-start e suas abreviações.
Referência da propriedade
| Valor inicial | none |
| Aplica-se a | Contêineres de grid |
| Herdada | Não |
| Animável | Não |
| Versão | CSS Grid Layout Module Level 1 |
Sintaxe
grid-template-areas: none | <string>+;none é o padrão e significa que nenhuma área nomeada está definida. Caso contrário, o valor é uma ou mais strings entre aspas — uma por linha.
Como interpretar as strings
Algumas regras tornam a sintaxe mais clara:
- Uma string = uma linha. Três strings entre aspas criam três linhas; o número de nomes de tokens em cada string determina o número de colunas.
- Cada string deve conter o mesmo número de tokens, caso contrário o navegador trata toda a declaração como inválida e a ignora.
- Um nome repetido abrange células. Escrever o mesmo nome em duas ou mais células adjacentes — horizontalmente, verticalmente ou em um retângulo — as une em uma única área. A forma deve ser retangular; uma forma em L é inválida.
- Um ponto (
.) marca uma célula vazia que não pertence a nenhuma área nomeada. Múltiplos pontos consecutivos (ex.:...) contam como uma única célula vazia e são uma convenção comum para legibilidade. - Nomear uma área não dimensiona suas trilhas. Use grid-template-columns e grid-template-rows — ou a abreviação grid-template — para controlar as dimensões.
.container {
display: grid;
grid-template-columns: 1fr 3fr 1fr;
grid-template-rows: auto 1fr auto;
grid-template-areas:
"header header header"
"menu main right"
"footer footer footer";
}Aqui, header e footer abrangem todas as três colunas, enquanto menu, main e right ficam lado a lado na linha do meio.
Valores
| Valor | Descrição |
|---|---|
none | Nenhuma área de grid nomeada está definida. Os itens do grid são posicionados por outros meios (números de linha, span ou posicionamento automático). |
<string>+ | Uma ou mais strings entre aspas que desenham o template. Cada string representa uma linha; cada token separado por espaço em branco em uma string representa uma célula. Tokens repetidos formam áreas nomeadas retangulares; um token . é uma célula sem nome (vazia). |
Exemplo básico de layout
O layout clássico de página — cabeçalho, barra lateral, conteúdo e rodapé — é a demonstração mais simples de por que áreas nomeadas existem.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.box1 { grid-area: header; }
.box2 { grid-area: menu; }
.box3 { grid-area: main; }
.box4 { grid-area: right; }
.box5 { grid-area: footer; }
.grid-container {
display: grid;
grid-template-areas:
"header header header header header header"
"menu main main main right right"
"menu footer footer footer footer footer";
gap: 10px;
background-color: #ccc;
padding: 10px;
}
.grid-container > div {
background-color: #eee;
text-align: center;
padding: 20px 0;
font-size: 30px;
}
</style>
</head>
<body>
<h2>Grid-template-areas property example</h2>
<div class="grid-container">
<div class="box1">Header</div>
<div class="box2">Menu</div>
<div class="box3">Main</div>
<div class="box4">Right</div>
<div class="box5">Footer</div>
</div>
</body>
</html>Resultado
Células vazias com pontos
Um token de ponto posiciona um item sem pertencer a nenhuma área nomeada, deixando essa célula desocupada. No exemplo abaixo, item1 abrange as primeiras duas colunas de um grid de cinco colunas; as três células restantes nessa única linha estão vazias.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.box { grid-area: item1; }
.grid-container {
display: grid;
grid-template-areas: "item1 item1 . . .";
gap: 10px;
background-color: #ccc;
padding: 10px;
}
.grid-container > div {
background-color: #eee;
text-align: center;
padding: 30px 0;
font-size: 20px;
}
</style>
</head>
<body>
<h2>Grid-template-areas property example</h2>
<div class="grid-container">
<div class="box">1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
</body>
</html>Layouts responsivos com media queries
grid-template-areas combina naturalmente com media queries: basta reescrever as strings dentro do bloco de breakpoint e o layout é redesenhado sem alterações no markup e sem necessidade de renumerar as linhas do grid.
/* Mobile: single-column stack */
.page {
display: grid;
grid-template-columns: 1fr;
grid-template-areas:
"header"
"menu"
"main"
"footer";
}
/* Desktop: sidebar left, content right */
@media (min-width: 700px) {
.page {
grid-template-columns: 200px 1fr;
grid-template-rows: auto 1fr auto;
grid-template-areas:
"header header"
"menu main"
"footer footer";
}
}Cada item do grid mantém seu nome grid-area; apenas o template muda. Essa é a principal razão pela qual áreas nomeadas são preferidas em relação ao posicionamento por número de linha em designs responsivos.
Problemas comuns
As áreas devem ser retangulares
Se o mesmo nome aparecer em forma de L, diagonal ou qualquer padrão não retangular entre células, o navegador trata toda a declaração grid-template-areas como inválida e volta a none. Toda área nomeada deve formar um retângulo ininterrupto.
/* INVALID — "content" forms an L-shape */
.bad {
grid-template-areas:
"header header"
"content sidebar"
"content content"; /* content is now L-shaped → invalid */
}
/* VALID — "content" is rectangular */
.good {
grid-template-areas:
"header header"
"content sidebar"
"footer footer";
}Todas as linhas devem ter o mesmo número de colunas
Cada string entre aspas deve ter o mesmo número de tokens separados por espaço em branco. Preencha linhas mais curtas com tokens de ponto para que as colunas se alinhem:
/* INVALID — row 2 has only 2 tokens, row 1 has 3 */
.bad {
grid-template-areas:
"a a b"
"c c";
}
/* VALID — three tokens in every row */
.good {
grid-template-areas:
"a a b"
"c c .";
}Nomear uma área não dimensiona suas trilhas
Áreas nomeadas dizem ao navegador quais células pertencem juntas, não qual o tamanho dessas células. Sempre combine grid-template-areas com grid-template-columns e grid-template-rows:
.container {
display: grid;
grid-template-columns: 180px 1fr; /* sidebar fixed, content fluid */
grid-template-rows: 60px 1fr 40px; /* header, body, footer heights */
grid-template-areas:
"header header"
"nav content"
"nav footer";
}Itens do grid sem correspondência são posicionados automaticamente
Se o nome grid-area de um filho não corresponder a nenhuma área no template, o navegador o posiciona automaticamente usando o algoritmo grid-auto-flow — ele vai para a próxima célula implícita disponível em vez de desaparecer.
A abreviação grid-template
A propriedade grid-template combina grid-template-rows, grid-template-columns e grid-template-areas em uma única declaração:
.container {
display: grid;
grid-template:
"header header" 60px
"nav content" 1fr
"footer footer" 40px
/ 180px 1fr;
}O tamanho da linha segue cada string na mesma linha; os tamanhos das colunas vêm após a / final. O resultado é idêntico ao de escrever as três propriedades separadamente.