Áreas Grid CSS
Grid Items ensinou números de linha e span. As áreas nomeadas fazem uma pergunta mais amigável: dá para desenhar a página com palavras — header, sidebar, main, footer — e cada filho reclamar um rótulo? grid-template-areas é o mapa; grid-area é o pino.
Uma caixa de ferramentas de áreas grid
📊 Áreas grid num relance
| Propriedade / token | Trabalho do dia a dia |
|---|---|
grid-template-areas |
No contentor: strings entre aspas que nomeiam cada célula |
grid-area |
Num item: qual região nomeada esse filho ocupa |
| Nome repetido | O mesmo nome em células adjacentes = um retângulo que se estica |
. (ponto) |
Uma célula vazia sem nome |
| Tracks do template | Ainda defina o tamanho com grid-template-columns / rows |
Cada string entre aspas é uma linha do mapa. Os nomes numa linha separam-se por espaços. Todas as linhas devem listar o mesmo número de células, senão o template é inválido.
grid-template-areas — desenhar o mapa
Escreva o layout que pretende com rótulos simples. Uma casca clássica de página costuma cobrir quatro papéis nomeados em três linhas.
.shell {
display: grid;
grid-template-columns: 14rem 1fr;
grid-template-rows: auto 1fr auto;
grid-template-areas:
"header header"
"aside main"
"footer footer";
gap: 1rem;
}
grid-area — fixar cada filho
Cada filho escolhe um nome do mapa. As classes podem ficar em estilo BEM; o Grid lê o token da área.
.shell__header { grid-area: header; }
.shell__aside { grid-area: aside; }
.shell__main { grid-area: main; }
.shell__footer { grid-area: footer; }
Esticar repetindo um nome
Para alargar uma região, escreva o mesmo nome em cada célula que deve pertencer-lhe. A região tem de ficar um retângulo sólido — sem formas em L.
.magazine {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-areas:
"hero hero hero"
"card1 card2 card3";
gap: 0.75rem;
}
.magazine__hero { grid-area: hero; }
Células vazias com um ponto
Um . sozinho marca um buraco. Útil quando um tabuleiro de cartões deve deixar um vão sem inventar um nome falso.
.board {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-areas:
"alpha ."
"beta gamma";
gap: 0.5rem;
}
.board__a { grid-area: alpha; }
.board__b { grid-area: beta; }
.board__c { grid-area: gamma; }
Um hábito calmo de áreas nomeadas
Esboce o mapa em grid-template-areas, dimensione as tracks com columns/rows, depois fixe os filhos com grid-area. Mantenha nomes curtos e retangulares. Volte a grid-column / grid-row quando uma colocação pontual for mais clara do que reescrever o mapa inteiro. As reescritas responsivas do mapa ficam para Grid Responsive.
.page {
display: grid;
grid-template-columns: minmax(12rem, 16rem) 1fr;
grid-template-areas:
"nav content"
"nav content";
gap: 1.25rem;
}
.page__nav { grid-area: nav; }
.page__content { grid-area: content; }
Experimente você mesmo
- Desenhe um mapa header / aside+main / footer com
grid-template-areas. - Atribua quatro filhos com valores
grid-areacorrespondentes. - Construa um hero de três colunas que repete
herona primeira linha. - Deixe uma célula vazia com
.num tabuleiro dois-por-dois. - Mantenha os tamanhos de track no contentor; anote as trocas de mapa para a lição Grid responsiva seguinte.
Erros comuns
- Nomear uma região em L ou desconectada (as áreas devem ser retângulos)
- Contagens de células diferentes entre linhas entre aspas
- Por
grid-template-areasnum filho em vez do contentor - Tratar nomes de área como seletores de classe CSS — são tokens de template
- Remover
grid-template-columns/rowse esperar que os nomes sozinhos definam tamanhos
Resumo
- Áreas nomeadas transformam um layout num mapa de células legível
grid-template-areasvive no contentor;grid-areaem cada item- Repita um nome para span; use
.para células vazias - Mantenha regiões retangulares e combine nomes com o dimensionamento das tracks
- A colocação por linhas ainda funciona; mudanças de mapa responsivas vêm a seguir
🧠 Teste Seu Conhecimento
Teste Seu Conhecimento
Desafie-se com este questionário interativo e veja o quão bem você entende o tópico
📝 Instruções
- Leia cada pergunta cuidadosamente
- Selecione a melhor resposta para cada pergunta
- Você pode refazer o quiz quantas vezes quiser
- Seu progresso será mostrado no topo