Nomeie regiões com grid-template-areas

Números de linhas são precisos, mas uma página com cabeçalho, menu e conteúdo pode ficar mais legível quando as regiões têm nomes. Nesta aula, você desenhará o layout quase como uma planta textual e trocará esse desenho numa tela estreita.

grid-template-areas declara um mapa de áreas nomeadas. Cada string é uma linha do desenho e cada palavra ocupa uma célula. Imagine a planta de uma loja: “caixa”, “estante” e “estoque” dizem a função de cada região. No CSS, esses nomes conectam a malha ao grid-area dos itens. O limite é que o mapa precisa ser retangular e cada área repetida precisa formar um único retângulo; formatos quebrados ou diagonais tornam a declaração inválida.

Desenhe primeiro o layout largo

Uma página com três colunas pode usar:

.pagina {
  display: grid;
  grid-template-columns: 12rem 1fr 14rem;
  grid-template-areas:
    "topo topo topo"
    "menu conteudo resumo"
    "rodape rodape rodape";
}

A primeira linha repete topo três vezes, então essa área atravessa três colunas. O mesmo ocorre com rodape. Na região do meio, cada nome ocupa um track. Agora associe os filhos:

.topo { grid-area: topo; }
.menu { grid-area: menu; }
.conteudo { grid-area: conteudo; }
.resumo { grid-area: resumo; }
.rodape { grid-area: rodape; }

Os nomes não vêm do HTML e não precisam coincidir com classes, embora manter correspondência ajude a leitura. Sem grid-area, o item continua disponível para o posicionamento automático.

Um ponto, ., representa célula vazia:

grid-template-areas:
  "topo topo"
  "conteudo .";

Use vazio quando ele faz parte do desenho, não para empurrar conteúdo por capricho. Gap e alinhamento resolvem espaços entre regiões.

Uma área repetida precisa formar um retângulo contínuo. Este desenho é válido:

grid-template-areas:
  "foto titulo"
  "foto resumo";

foto ocupa duas células empilhadas e forma um retângulo. Já repetir foto no canto superior esquerdo e no inferior direito, deixando outro nome entre elas, cria uma forma quebrada. O navegador descarta a declaração inteira. Essa regra mantém cada nome equivalente a uma região única com bordas reconhecíveis.

Troque o mapa, não a ordem do documento

Em tela estreita, mantenha o HTML e declare uma coluna:

@media (max-width: 42rem) {
  .pagina {
    grid-template-columns: 1fr;
    grid-template-areas:
      "topo"
      "menu"
      "conteudo"
      "resumo"
      "rodape";
  }
}

Essa ordem deve acompanhar a sequência lógica do documento. Se o mapa coloca resumo visualmente antes de conteudo, mas o HTML diz o contrário, teclado e leitor de tela podem percorrer outra história. A possibilidade técnica não substitui uma decisão de acessibilidade.

Faça o erro aparecer de propósito

Remova uma palavra da segunda string. Como as linhas deixam de ter a mesma quantidade de células, toda a declaração de áreas fica inválida. Outro erro é escrever um nome no mapa e outro em grid-area; o item sem região pode ser posicionado automaticamente e parecer ter “sumido”.

Quando isso acontecer, não redesenhe tudo. Abra os estilos calculados, veja se grid-template-areas foi riscado e conte as palavras de cada linha. Depois compare cada nome do mapa com os valores de grid-area. Esse roteiro transforma um layout aparentemente aleatório em duas verificações objetivas.

No laboratório, renomeie resumo para pedido apenas num dos lados, observe e corrija. Depois ative o mapa de uma coluna. A missão termina com cinco regiões, dois mapas e nenhuma alteração no HTML entre larguras. Leia o mapa em voz alta: se outra pessoa entende a planta sem contar números de linha, as áreas cumpriram seu papel.