Áreas Nomeadas com grid-template-areas | Web Academy

Web-Zoneware — Thu, 22 Oct 2026 02:53:27 +0000

Projetar a estrutura de um portal de notícias ou painel administrativo no CSS costumava exigir que você decorasse números de coordenadas cartesianas invisíveis: “este cabeçalho começa na linha 1 e vai até a 4, a barra lateral ocupa da coluna 1 à 2…”. Essa complexidade aritmética desaparece com a funcionalidade mais visual e poética já criada pela W3C: as Áreas Nomeadas através de grid-template-areas e grid-area. Com elas, você literalmente “desenha” o mapa do seu site em texto puro dentro do código CSS!

1. A Dupla Dinâmica: `grid-template-areas` e `grid-area`

A mágica das áreas nomeadas opera através de uma parceria conceitual simples entre o elemento pai e seus filhos:

No elemento pai (Grid Container): Usamos grid-template-areas para desenhar uma matriz de palavras entre aspas, onde cada palavra representa o nome de uma região da tela.
Nos elementos filhos (Grid Items): Usamos a propriedade grid-area para associar cada nó HTML ao nome correspondente desenhado na matriz pai.

CSS3 18 linhas

/* 1. O PAI DESENHA O MAPA DA CIDADE */
.layout-site {
  display: grid;
  grid-template-columns: 260px 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "topo    topo"
    "barra   conteudo"
    "rodape  rodape";
  min-height: 100vh;
  gap: 20px;
}
 
/* 2. OS FILHOS OCUPAM SEUS BAIRROS */
.header-principal { grid-area: topo; }
.sidebar-lateral   { grid-area: barra; }
.main-conteudo    { grid-area: conteudo; }
.footer-rodape    { grid-area: rodape; }

/* 1. O PAI DESENHA O MAPA DA CIDADE */
.layout-site {
  display: grid;
  grid-template-columns: 260px 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "topo    topo"
    "barra   conteudo"
    "rodape  rodape";
  min-height: 100vh;
  gap: 20px;
}

/* 2. OS FILHOS OCUPAM SEUS BAIRROS */
.header-principal { grid-area: topo; }
.sidebar-lateral   { grid-area: barra; }
.main-conteudo    { grid-area: conteudo; }
.footer-rodape    { grid-area: rodape; }

Apenas de bater o olho no bloco de grid-template-areas, qualquer desenvolvedor que entrar na sua equipe saberá instantaneamente a disposição visual completa da página: o topo ocupa as duas colunas, a barra fica à esquerda, o conteudo à direita, e o rodape atravessa as duas colunas na base!

2. As 4 Regras Inquebráveis do `grid-template-areas`

O parser do navegador é extremamente rigoroso com a sintaxe das áreas. Para que o layout funcione perfeitamente, você deve respeitar estas 4 leis:

1. Linhas em Strings Isoladas

Cada linha horizontal da sua grade deve estar encapsulada dentro de suas próprias aspas ("...").

2. Colunas Separadas por Espaços

Cada palavra dentro da string representa uma coluna individual naquela linha, separada por um ou mais espaços em branco.

3. A Lei Sagrada da Retangularidade

Proibição de Formas Não-Retangulares: Toda área nomeada DEVE formar obrigatoriamente um retângulo perfeito ou quadrado contíguo. Você NUNCA pode criar áreas em formato de “L”, formato de “T” ou com nós espalhados em cantos opostos. Se você declarar "topo lateral" "conteudo topo", o navegador anulará toda a regra da grade!

4. O Token Ponto (`.`) para Células Vazias

Se você desejar deixar uma célula vazia intencionalmente na grade (sem nenhum elemento dentro), basta usar o caractere ponto (.). Vários pontos seguidos sem espaço (como ...) representam uma única célula vazia:

CSS3 8 linhas

.layout-com-vazio {
  display: grid;
  grid-template-columns: 200px 1fr 200px;
  grid-template-areas:
    "header  header  header"
    "sidebar main    ."
    "footer  footer  footer"; /* Há um espaço intencionalmente vazio à direita da main! */
}

.layout-com-vazio {
  display: grid;
  grid-template-columns: 200px 1fr 200px;
  grid-template-areas:
    "header  header  header"
    "sidebar main    ."
    "footer  footer  footer"; /* Há um espaço intencionalmente vazio à direita da main! */
}

3. O Superpoder da Responsividade Sem Tocar no HTML

O verdadeiro brilho do grid-template-areas revela-se no design responsivo. Imagine que, no celular, você quer que o conteúdo principal (conteudo) apareça no topo, seguido pela barra lateral (barra), com tudo em uma única coluna vertical.

Com outras abordagens, você teria que alterar o DOM via JavaScript ou recalcular dezenas de propriedades de linhas e colunas. Com áreas nomeadas, você não toca no HTML e não altera o CSS dos filhos! Basta redefinir o mapa no contêiner pai dentro da media query:

CSS3 11 linhas

/* REORGANIZAÇÃO COMPLETA PARA SMARTPHONES */
@media (max-width: 768px) {
  .layout-site {
    grid-template-columns: 1fr; /* 1 coluna linear */
    grid-template-areas:
      "topo"
      "conteudo"  /* O conteúdo sobe para a frente da barra lateral! */
      "barra"
      "rodape";
  }
}

/* REORGANIZAÇÃO COMPLETA PARA SMARTPHONES */
@media (max-width: 768px) {
  .layout-site {
    grid-template-columns: 1fr; /* 1 coluna linear */
    grid-template-areas:
      "topo"
      "conteudo"  /* O conteúdo sobe para a frente da barra lateral! */
      "barra"
      "rodape";
  }
}

4. Acessibilidade e a Ordem do DOM (WCAG 2.2)

Alerta de Usabilidade: Lembre-se sempre de que o grid-template-areas altera unicamente a renderização visual óptica na tela. O leitor de tela para deficientes visuais e a navegação por teclado com a tecla Tab continuarão navegando na sequência exata em que os elementos foram escritos no arquivo HTML. Mantenha seu código HTML semântico estruturado de forma lógica e coesa.

5. Laboratório Prático: Dashboard Completo com ASCII Layout

No código interativo abaixo, construímos um painel administrativo com 4 áreas nomeadas (topo, menu, analítico e widgets) e uma media query que reorganiza todo o fluxo em telas menores:

HTML5 75 linhas

 html>
 lang="pt-BR">

   charset="UTF-8">
  </span>Laboratório de Áreas Nomeadas CSS Grid<span class="wzw-tk-tag">
  


   class="dashboard-grid">
     class="header-box">⚡ Cabeçalho do Dashboard (topo)
     class="sidebar-nav">📁 Menu de Navegação (menu)
     class="main-body">📊 Painel Principal de Gráficos (analitico)

Arquivos ascii layout css - Web-Zoneware

Áreas Nomeadas com grid-template-areas | Web Academy

1. A Dupla Dinâmica: `grid-template-areas` e `grid-area`

2. As 4 Regras Inquebráveis do `grid-template-areas`

1. Linhas em Strings Isoladas

2. Colunas Separadas por Espaços

3. A Lei Sagrada da Retangularidade

4. O Token Ponto (`.`) para Células Vazias

3. O Superpoder da Responsividade Sem Tocar no HTML

4. Acessibilidade e a Ordem do DOM (WCAG 2.2)

5. Laboratório Prático: Dashboard Completo com ASCII Layout

6. Resumo e Próximos Passos

Arquivos ascii layout css - Web-Zoneware

Áreas Nomeadas com grid-template-areas | Web Academy

1. A Dupla Dinâmica: grid-template-areas e grid-area

2. As 4 Regras Inquebráveis do grid-template-areas

1. Linhas em Strings Isoladas

2. Colunas Separadas por Espaços

3. A Lei Sagrada da Retangularidade

4. O Token Ponto (.) para Células Vazias

3. O Superpoder da Responsividade Sem Tocar no HTML

4. Acessibilidade e a Ordem do DOM (WCAG 2.2)

5. Laboratório Prático: Dashboard Completo com ASCII Layout

6. Resumo e Próximos Passos

1. A Dupla Dinâmica: `grid-template-areas` e `grid-area`

2. As 4 Regras Inquebráveis do `grid-template-areas`

4. O Token Ponto (`.`) para Células Vazias