Lição 35 de 50

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

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!

📑 Índice do Conteúdo

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

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <title>Laboratório de Áreas Nomeadas CSS Grid</title>
  <style>
    body {
      font-family: 'Inter', system-ui, sans-serif;
      background: #0b0f19;
      color: #f8fafc;
      margin: 0;
      padding: 20px;
    }
 
    /* O MAPA MESTRE (DESKTOP: 3 COLUNAS) */
    .dashboard-grid {
      display: grid;
      grid-template-columns: 220px 1fr 240px;
      grid-template-rows: 70px 1fr 50px;
      grid-template-areas:
        "topo   topo      topo"
        "menu   analitico widgets"
        "rodape rodape    rodape";
      gap: 16px;
      min-height: calc(100vh - 40px);
    }
 
    /* VINCULAÇÃO DAS ÁREAS */
    .header-box  { grid-area: topo;      background: #1e293b; border: 1px solid #334155; }
    .sidebar-nav { grid-area: menu;      background: #111827; border: 1px solid #1f2937; }
    .main-body   { grid-area: analitico;  background: #0f172a; border: 1px solid #334155; }
    .aside-info  { grid-area: widgets;   background: #1e293b; border: 1px solid #334155; }
    .footer-box  { grid-area: rodape;    background: #020617; border: 1px solid #1e293b; }
 
    /* Estilos cosméticos das caixas */
    .header-box, .sidebar-nav, .main-body, .aside-info, .footer-box {
      border-radius: 10px;
      padding: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 700;
      color: #94a3b8;
    }
 
    .main-body {
      color: #38bdf8;
      font-size: 1.2rem;
    }
 
    /* REORDENAÇÃO MÁGICA PARA MOBILE */
    @media (max-width: 820px) {
      .dashboard-grid {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        grid-template-areas:
          "topo"
          "analitico"
          "widgets"
          "menu"
          "rodape";
      }
    }
  </style>
</head>
<body>
  <div class="dashboard-grid">
    <header class="header-box">⚡ Cabeçalho do Dashboard (topo)</header>
    <nav class="sidebar-nav">📁 Menu de Navegação (menu)</nav>
    <main class="main-body">📊 Painel Principal de Gráficos (analitico)</main>
    <aside class="aside-info">🔔 Widgets & Alertas (widgets)</aside>
    <footer class="footer-box">&copy; 2026 Economaster Web Portal (rodape)</footer>
  </div>
</body>
</html>

<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<title>Laboratório de Áreas Nomeadas CSS Grid</title>
<style>
body {
font-family: 'Inter', system-ui, sans-serif;
background: #0b0f19;
color: #f8fafc;
margin: 0;
padding: 20px;
}
/* O MAPA MESTRE (DESKTOP: 3 COLUNAS) */
.dashboard-grid {
display: grid;
grid-template-columns: 220px 1fr 240px;
grid-template-rows: 70px 1fr 50px;
grid-template-areas:
"topo   topo      topo"
"menu   analitico widgets"
"rodape rodape    rodape";
gap: 16px;
min-height: calc(100vh - 40px);
}
/* VINCULAÇÃO DAS ÁREAS */
.header-box  { grid-area: topo;      background: #1e293b; border: 1px solid #334155; }
.sidebar-nav { grid-area: menu;      background: #111827; border: 1px solid #1f2937; }
.main-body   { grid-area: analitico;  background: #0f172a; border: 1px solid #334155; }
.aside-info  { grid-area: widgets;   background: #1e293b; border: 1px solid #334155; }
.footer-box  { grid-area: rodape;    background: #020617; border: 1px solid #1e293b; }
/* Estilos cosméticos das caixas */
.header-box, .sidebar-nav, .main-body, .aside-info, .footer-box {
border-radius: 10px;
padding: 16px;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
color: #94a3b8;
}
.main-body {
color: #38bdf8;
font-size: 1.2rem;
}
/* REORDENAÇÃO MÁGICA PARA MOBILE */
@media (max-width: 820px) {
.dashboard-grid {
grid-template-columns: 1fr;
grid-template-rows: auto;
grid-template-areas:
"topo"
"analitico"
"widgets"
"menu"
"rodape";
}
}
</style>
</head>
<body>
<div class="dashboard-grid">
<header class="header-box">⚡ Cabeçalho do Dashboard (topo)</header>
<nav class="sidebar-nav">📁 Menu de Navegação (menu)</nav>
<main class="main-body">📊 Painel Principal de Gráficos (analitico)</main>
<aside class="aside-info">🔔 Widgets & Alertas (widgets)</aside>
<footer class="footer-box">&copy; 2026 Economaster Web Portal (rodape)</footer>
</div>
</body>
</html>

Abra este laboratório no Playground IDE e redimensione a janela para menos de 820px: veja como todo o layout se reconfigura para celular instantaneamente através da nova matriz de grid-template-areas:

⚡ Abrir no Playground IDE →

6. Resumo e Próximos Passos

grid-template-areas permite desenhar layouts bidimensionais inteiros em formato de texto visual puro (ASCII Art).
Cada elemento filho é alocado no seu espaço através da declaração individual grid-area: nome_da_area;.
Toda área nomeada deve obrigatoriamente formar um retângulo contíguo perfeito.
O caractere ponto (.) é utilizado para reservar células intencionalmente vazias na matriz.
A responsividade com áreas nomeadas é incomparável: reescreva apenas a matriz de texto dentro de uma media query para reorganizar a página inteira sem encostar no HTML.

Próximo Passo: Agora que você domina as ferramentas mais avançadas de layout moderno, como planejar páginas que funcionam com perfeição em qualquer tela desde o primeiro rascunho de código? Na Lição 36, mergulharemos nos pilares do Design Responsivo & Filosofia Mobile-First!