Come funzionano grid-template-areas e le griglie responsive?

Question

Accepted Answer

`grid-template-areas` ti permette di creare il layout di una griglia **visivamente** assegnando nomi alle regioni, rendendo i layout complessi di pagina leggibili e facili da riorganizzare in modo responsive.

## Definire aree nominate

```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; }
```

L'ASCII-art `grid-template-areas` *è* il layout — puoi vedere la struttura a colpo d'occhio, e ripetere un nome fa sì che una regione si estenda su più celle.

## Riorganizzare per mobile — ridisegna semplicemente la mappa

```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";
  }
}
```

Per cambiare l'intero layout su mobile, riscrivi semplicemente la mappa delle aree — l'HTML e gli assegnamenti `grid-area` rimangono identici. Questo è molto più pulito che riposizionare ogni elemento singolarmente.

## Perché è potente

- **Autodocumentante** — il CSS rispecchia visivamente il layout renderizzato.
- **Disaccoppiato dall'ordine sorgente** — gli elementi possono essere posizionati ovunque indipendentemente dall'ordine HTML (utile per mettere `main` per primo nel DOM per l'accessibilità, eppure visualizzando prima la sidebar visivamente).
- **Reflusso responsive facile** — scambia il template di area per breakpoint.

## Perché è importante

Le aree nominate della griglia rendono i layout a livello di pagina (header/sidebar/main/footer) sia leggibili che banalmente responsive — la ristrutturazione è una questione di modifica di una mappa ASCII, non di rivelocizzazione delle posizioni.

È una delle tecniche di layout più chiare e mantenibili che CSS offre.