Propriedade grid-template-areas: Desenhando o layout com nomes

Crie layouts complexos de forma visual, usando os nomes das áreas.

Na lição anterior, você aprendeu a nomear seus Itens Grid usando a propriedade grid-area. Agora, vamos ver como usar esses nomes para "desenhar" o layout do seu grid de forma visual e incrivelmente intuitiva, utilizando a propriedade grid-template-areas.

A propriedade grid-template-areas é aplicada ao Contêiner Grid e permite que você defina a estrutura do seu grid usando os nomes das áreas que você atribuiu aos seus Itens Grid. É como se você estivesse desenhando o layout com caracteres ASCII no seu CSS!

Pense no grid-template-areas como a "planta baixa" da sua casa. Você usa os nomes dos cômodos (cabecalho, sala, cozinha, quarto) para desenhar onde cada um deles ficará no layout geral.

Como funciona grid-template-areas

  1. Defina as Áreas dos Itens: Primeiro, você atribui um nome a cada Item Grid que deseja posicionar, usando a propriedade grid-area (como vimos na lição anterior).

  2. Desenhe o Layout no Contêiner: No Contêiner Grid, você usa grid-template-areas para "desenhar" o layout.

    • Cada string entre aspas representa uma linha do grid.
    • Dentro de cada string, os nomes das áreas (separados por espaços) representam as colunas.
    • O número de colunas em cada string deve ser o mesmo.
    • O número de strings define o número de linhas.

Sintaxe:

.grid-container {
  display: grid;
  grid-template-columns: ...; /* Defina suas colunas */
  grid-template-rows: ...;    /* Defina suas linhas */
  grid-template-areas:
    "nome-area-1 nome-area-2 nome-area-3"
    "nome-area-4 nome-area-5 nome-area-6"
    /* ... e assim por diante */
  ;
}

Regras Importantes:

  • Retângulo Contínuo: Uma área nomeada deve formar um retângulo contínuo. Você não pode ter uma área "quebrada" ou em forma de "L".
  • Células Vazias: Para deixar uma célula vazia, use um ponto (.) ou múltiplos pontos (...).
  • Nomes Repetidos: Se você repetir o nome de uma área em células adjacentes, o Item Grid correspondente ocupará todas essas células.

Exemplo Prático:

Vamos usar o exemplo da lição anterior, onde nomeamos os itens, e agora vamos "desenhar" o layout.

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <title>Propriedade grid-template-areas</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 20px;
      background-color: #f4f4f4;
    }

    .grid-container {
      display: grid;
      /* 1. Definindo as colunas e linhas */
      grid-template-columns: 1fr 3fr 1fr; /* 3 colunas: barra lateral esquerda, conteúdo, barra lateral direita */
      grid-template-rows: auto 1fr auto; /* 3 linhas: cabeçalho, conteúdo principal, rodapé */
      gap: 10px;
      background-color: #e0e0e0;
      border: 2px solid #333;
      padding: 10px;
      width: 90%;
      height: 500px; /* Altura para ver as linhas */
      margin: 0 auto 30px auto;

      /* 2. Desenhando o layout com os nomes das áreas */
      grid-template-areas:
        "cabecalho cabecalho cabecalho" /* O cabeçalho ocupa todas as 3 colunas da primeira linha */
        "barra-esquerda conteudo-principal barra-direita" /* Barras laterais e conteúdo na linha do meio */
        "rodape rodape rodape"; /* O rodapé ocupa todas as 3 colunas da última linha */
    }

    .grid-item {
      background-color: lightblue;
      border: 1px solid blue;
      padding: 15px;
      color: #333;
      font-weight: bold;
      text-align: center;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    /* --- Nomeando os itens com grid-area --- */
    .header {
      background-color: lightcoral;
      grid-area: cabecalho;
    }

    .sidebar-left {
      background-color: lightgreen;
      grid-area: barra-esquerda;
    }

    .main-content {
      background-color: lightgoldenrodyellow;
      grid-area: conteudo-principal;
    }

    .sidebar-right {
      background-color: lightsalmon;
      grid-area: barra-direita;
    }

    .footer {
      background-color: lightgray;
      grid-area: rodape;
    }
  </style>
</head>
<body>
  <h1>Propriedade `grid-template-areas`: Desenhando o layout com nomes</h1>

  <div class="grid-container">
    <div class="grid-item header">Cabeçalho</div>
    <div class="grid-item sidebar-left">Barra Lateral Esquerda</div>
    <div class="grid-item main-content">Conteúdo Principal</div>
    <div class="grid-item sidebar-right">Barra Lateral Direita</div>
    <div class="grid-item footer">Rodapé</div>
  </div>

  <p>Observe como o layout é "desenhado" diretamente no CSS usando os nomes das áreas. O cabeçalho e o rodapé ocupam toda a largura, enquanto as barras laterais e o conteúdo principal se organizam na linha do meio.</p>

  <h2>Exemplo com células vazias e layout diferente</h2>
  <div class="grid-container" style="height: 300px; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 100px 1fr;">
    <div class="grid-item" style="grid-area: logo;">Logo</div>
    <div class="grid-item" style="grid-area: nav;">Navegação</div>
    <div class="grid-item" style="grid-area: banner;">Banner</div>
    <div class="grid-item" style="grid-area: destaque;">Destaque</div>

    <style>
      .grid-container:last-of-type {
        grid-template-areas:
          "logo nav nav"
          "banner destaque destaque";
      }
    </style>
  </div>
  <p>Neste segundo exemplo, o layout foi redefinido para mostrar como usar células vazias e como as áreas podem se estender.</p>
</body>
</html>

Resultado:

  • Você verá um layout de página clássico, com cabeçalho e rodapé de largura total, e uma seção central com três colunas (barra lateral esquerda, conteúdo principal, barra lateral direita).
  • O segundo exemplo demonstra um layout diferente, com logo e nav na primeira linha, e banner e destaque na segunda.

Boas Práticas:

  • Sempre defina grid-template-columns e grid-template-rows: Embora grid-template-areas defina a estrutura visual, você ainda precisa de grid-template-columns e grid-template-rows para definir os tamanhos reais das suas colunas e linhas.
  • Use . para células vazias: Se uma célula não deve ser ocupada por nenhum Item Grid, use um ponto (.) ou múltiplos pontos (...) para representá-la.
  • Nomes Consistentes: Certifique-se de que os nomes usados em grid-template-areas correspondam exatamente aos nomes definidos com grid-area nos seus Itens Grid.
  • Responsividade com Media Queries: A maior vantagem de grid-template-areas é a facilidade de redefinir o layout em diferentes tamanhos de tela. Basta redefinir a propriedade grid-template-areas dentro de uma media query para reorganizar completamente seus elementos.

A propriedade grid-template-areas é uma das funcionalidades mais visuais e poderosas do CSS Grid, permitindo que você crie layouts complexos de forma clara, legível e altamente adaptável.