# Grid with named areas: the layout written as a map

Named areas write the layout as an ASCII map and keep the same names at every breakpoint. When they pay off, how to read them and where they break.

> Page: https://ui.eneawork.it/blog/css-grid-named-areas
> Markdown: https://ui.eneawork.it/blog/css-grid-named-areas.md

*2026-11-01*

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.

caniuse riporta 97,25% di supporto globale per CSS Grid (dati letti dal repository caniuse il 2 novembre 2026). La domanda «How to use grid-template-areas in react inline style?» vale 38 voti su Stack Overflow (letto lo stesso giorno con la Stack Exchange API): fonte. Il catalogo EneUI ha misurato 111.985 componenti, 1.556 blocchi e 12.808 icone da 1.472 librerie (/api/stats, 1 novembre 2026).

## 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

## 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.

## FAQ

### 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.