Sviluppo web

Grid con aree nominate: il layout scritto come mappa

Le aree nominate scrivono il layout come una mappa ASCII e tengono gli stessi nomi a ogni breakpoint. Quando convengono, come si legge e dove si rompono.

In sintesi

  • Ogni nome in `grid-template-areas` deve formare un rettangolo, altrimenti la dichiarazione viene scartata.
  • Al breakpoint si riscrive la mappa; i figli tengono lo stesso `grid-area`.
  • `grid-template-areas` non è animabile: una transizione tra due mappe scatta.

Le aree nominate permettono di scrivere il layout come una mappa dentro grid-template-areas. Convengono quando le zone della pagina hanno un nome stabile, header, nav, main, footer, e devono restare riconoscibili a ogni breakpoint.

La mappa

.shell {
  display: grid;
  grid-template-columns: 16rem minmax(0, 1fr);
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "nav header"
    "nav main"
    "nav footer";
  gap: 1rem;
  min-height: 100dvh;
}

.nav    { grid-area: nav; }
.header { grid-area: header; }
.main   { grid-area: main; }
.footer { grid-area: footer; }

Le virgolette contengono una riga di tracce; ogni parola è un nome di area e ogni punto è una cella vuota. Il numero di stringhe definisce le righe, il numero di nomi per stringa definisce le colonne: la mappa è anche la dichiarazione delle tracce.

Il breakpoint riscrive la mappa, non i figli

@media (max-width: 48rem) {
  .shell {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto 1fr auto;
    grid-template-areas:
      "header"
      "nav"
      "main"
      "footer";
  }
}

I componenti non cambiano: grid-area: nav resta uguale, e la posizione nel DOM resta quella dell'ordine di lettura. Questo è il guadagno rispetto alle coordinate numeriche, che vanno riscritte in ogni media query.

Tre errori che scartano la dichiarazione

  • Un nome in forma di L: l'area non è un rettangolo e il browser ignora tutta la proprietà.
  • Un nome ripetuto in due zone non adiacenti: il secondo uso è valido, ma il primo non diventa un rettangolo.
  • Righe di lunghezza diversa: il browser completa con celle implicite e le colonne non tornano.

Il record che uso come esempio

Una griglia di prodotto risolta con le aree nominate sta nel catalogo: grid-ecommerce-01. Le primitive per le card sono in card e la categoria hero copre la parte alta della pagina. Il catalogo conta 1.556 blocchi e 111.985 componenti da 1.472 librerie (1 novembre 2026).

Come verificare in dieci secondi

# quante mappe di layout esistono già nel progetto
grep -rn "grid-template-areas" --include="*.css" src/ | wc -l

# il layout non deve scorrere in orizzontale a 320 px
npx playwright screenshot --viewport-size=320,800 http://localhost:3000 mobile.png

Il limite noto

Le aree nominate non si animano: grid-template-areas non è una proprietà interpolabile, quindi una transizione tra due mappe mostra uno scatto. Se il cambio deve essere fluido, anima i figli con transform o usa le view transitions.

Per scegliere il modello di layout vedi Flexbox o Grid. La versione a 12 colonne con utility è in griglia Tailwind a 12 colonne; il confronto tra utility e CSS Modules è in Tailwind vs CSS Modules.

Domande frequenti

Le aree nominate funzionano dentro un subgrid?

Le linee nominate sì: un subgrid eredita i nomi delle linee sull'asse condiviso. Le aree no, perché grid-template-areas descrive tracce che il subgrid non possiede e va ridichiarato.

Perché il layout è sparito dopo una modifica?

Quasi sempre un nome non forma più un rettangolo. Il browser scarta l'intera dichiarazione di grid-template-areas e resta il flusso normale, senza errori in console.

Meglio aree nominate o grid-column con i numeri?

Aree quando le zone hanno un nome che riusi nei breakpoint. Numeri quando la griglia è generata da un ciclo e i nomi sarebbero tutti diversi.

Le aree si adattano alle lingue da destra a sinistra?

Sì. Le tracce seguono la direzione di scrittura, quindi con dir="rtl" la prima colonna della mappa compare a destra senza cambiare il CSS.

Posso lasciare una cella vuota?

Sì, con il punto. Una cella vuota non riceve contenuto ma occupa la traccia, quindi mantiene le distanze della mappa.