Propriedade de Áreas Nomeadas do Grid
Última atualização: 2026-09-13
grid-template-areas Propriedade de Áreas Nomeadas do Grid
A propriedade grid-template-areas permite definir a estrutura do layout do grid visualmente com áreas nomeadas. Cada string representa uma linha, e cada identificador na string representa a área à qual uma célula pertence; células adjacentes com o mesmo nome se fundem automaticamente em uma área. Ela melhora muito a legibilidade dos layouts grid e é especialmente adequada para designs de página inteira.
| Categoria | |
|---|---|
| Valor Inicial | none |
| Herdado | Não |
| Aplica-se A | |
| Tipo de Animação | |
| Versão CSS | CSS3 |
| Status | Padrão |
📝 Sintaxe
grid-template-areas: none | <string>+;⚙️ Valores
| Valor | Tipo | Descrição |
|---|---|---|
none | Palavra-chave | Sem áreas nomeadas |
<string> | Tipo | Definição do nome da área |
▶ Exemplo
Edite o código abaixo e veja o resultado ao vivo no playground:
🌐 Suporte dos Navegadores
| Navegador |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| grid-template-areas | ✓ v57 | ✓ v16 | ✓ v52 | ✓ v10.1 | ✓ v44 |
| Suportado em todos os principais navegadores | |||||
Dica： Como os nomes das áreas são escritos alinhados por linhas e colunas, a estrutura da página fica visível de imediato — uma das maiores vantagens de grid-template-areas.
Aviso： O número de células em cada string deve corresponder ao número de colunas do grid, e cada área deve ser retangular: formatos em L ou irregulares não são permitidos.
❓ Perguntas Frequentes
QQuais são as regras para os nomes de área em grid-template-areas?
AOs nomes de área devem ser identificadores CSS válidos: não podem começar com um dígito, não podem conter espaços ou caracteres especiais (hífens e sublinhados são permitidos) e não podem usar palavras-chave globais como auto ou span. Cada string define uma linha do grid, e células adjacentes que compartilham o mesmo nome dentro das strings se fundem em uma área, que deve ser retangular — formatos em L ou desconectados são inválidos.
QComo deixo uma célula vazia?
AUse um ou mais pontos (.) consecutivos para representar uma célula vazia, por exemplo "header . ." deixa a segunda e a terceira colunas vazias. Cada string de linha deve ter o mesmo comprimento, ou seja, o mesmo número de células, e os espaços reservados vazios contam para a contagem de colunas. Escreva um único . para uma célula que você quer vazia; pontos extras servem apenas para legibilidade e não têm significado.
QComo faço um layout responsivo com grid-template-areas?
AMova a atribuição de áreas para o CSS: no desktop use um modelo como "header header" / "sidebar main", e em uma media query mobile troque o modelo por "header" / "main" / "sidebar". Os filhos ainda referenciam os nomes das áreas com grid-area e o DOM nunca muda. Os nomes das áreas são rótulos puros sem significado semântico, então você pode renomeá-los livremente contanto que as referências grid-area nos itens correspondam ao modelo. Esse desacoplamento de layout e estrutura é o valor central de grid-template-areas.
🏷️ Propriedades Relacionadas
💡 Casos relacionados
📚 Tutoriais Relacionados
Posicionamento de Área do Grid
Coloca um item do grid em uma área nomeada
Trilhas de Coluna do Grid
Define a estrutura das colunas do grid
