Como funcionam grid-template-areas e grids responsivos?

Question

Accepted Answer

`grid-template-areas` permite que você organize uma grid **visualmente** nomeando regiões, tornando layouts de página complexos legíveis e fáceis de reorganizar responsivamente.

## Definindo áreas nomeadas

```css
.layout {
  display: grid;
  grid-template-columns: 200px 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header  header"   /* row 1: header spans both columns */
    "sidebar main"     /* row 2: sidebar | main */
    "footer  footer";  /* row 3: footer spans both */
  min-height: 100vh;
}

.header  { grid-area: header; }   /* assign each element to a named area */
.sidebar { grid-area: sidebar; }
.main    { grid-area: main; }
.footer  { grid-area: footer; }
```

O `grid-template-areas` em *ASCII-art* **é** o layout — você pode ver a estrutura num relance, e repetir um nome faz uma região ocupar múltiplas células.

## Reorganizando para mobile — apenas redesenhe o mapa

```css
@media (max-width: 600px) {
  .layout {
    grid-template-columns: 1fr;        /* single column */
    grid-template-areas:
      "header"
      "main"      /* main now ABOVE sidebar on mobile */
      "sidebar"
      "footer";
  }
}
```

Para alterar o layout inteiro para mobile, você apenas reescreve o mapa de áreas — o HTML e as atribuições `grid-area` permanecem idênticas. Isso é muito mais limpo do que reposicionar cada elemento individualmente.

## Por que isso é poderoso

- **Auto-documentado** — o CSS espelha visualmente o layout renderizado.
- **Desacoplado da ordem do código-fonte** — elementos podem ser posicionados em qualquer lugar independentemente da ordem do HTML (bom para colocar `main` primeiro no DOM por acessibilidade, mas exibir a sidebar primeiro visualmente).
- **Reflow responsivo fácil** — troque o template de área por breakpoint.

## Por que isso importa

Áreas de grid nomeadas tornam layouts de nível de página (header/sidebar/main/footer) legíveis e trivialmente responsivos — reestruturação é uma questão de editar um mapa ASCII, não de reconfigurar posições.

É uma das técnicas de layout mais claras e mantíveis que o CSS oferece.