Proprietà CSS grid-template-areas
Scopri come usare CSS grid-template-areas per nominare regioni della griglia, costruire layout visivamente e riorganizzarli con le media query.
La proprietà grid-template-areas ti permette di disporre visivamente una CSS grid disegnando il layout con nomi invece di numeri. Si applica a un contenitore grid e riceve una stringa tra virgolette per ogni riga della griglia. All'interno di ogni stringa si scrive un nome per ogni cella di colonna, e le celle che condividono lo stesso nome si uniscono in un'unica area denominata rettangolare.
Ogni elemento della griglia viene poi posizionato facendo riferimento a uno di questi nomi tramite la proprietà grid-area — per esempio grid-area: header; colloca quell'elemento esattamente dove hai scritto header nel template. Poiché le stringhe si allineano l'una sotto l'altra come un'immagine ASCII, il codice sorgente finisce per assomigliare alla pagina che produce, rendendo i layout complessi molto più facili da leggere e riorganizzare rispetto all'impostazione manuale di grid-row-start, grid-column-start e delle relative proprietà abbreviate.
Riferimento alla proprietà
| Valore iniziale | none |
| Si applica a | Contenitori grid |
| Ereditata | No |
| Animabile | No |
| Versione | CSS Grid Layout Module Level 1 |
Sintassi
grid-template-areas: none | <string>+;none è il valore predefinito e significa che non sono definite aree denominate. In caso contrario il valore è una o più stringhe tra virgolette — una per ogni riga.
Come leggere le stringhe
Alcune regole rendono la sintassi chiara:
- Una stringa = una riga. Tre stringhe tra virgolette creano tre righe; il numero di token in ogni stringa determina il numero di colonne.
- Ogni stringa deve contenere lo stesso numero di token, altrimenti il browser tratta l'intera dichiarazione come non valida e la ignora.
- Un nome ripetuto si estende su più celle. Scrivere lo stesso nome in due o più celle adiacenti — orizzontalmente, verticalmente o in un rettangolo — le unisce in un'unica area. La forma deve essere rettangolare; una forma a L non è valida.
- Un punto (
.) contrassegna una cella vuota che non appartiene ad alcuna area denominata. Più punti consecutivi (es....) contano come una singola cella vuota e sono una convenzione comune per la leggibilità. - Denominare un'area non ne determina le dimensioni dei track. Usa grid-template-columns e grid-template-rows — o la proprietà abbreviata grid-template — per controllare le dimensioni.
.container {
display: grid;
grid-template-columns: 1fr 3fr 1fr;
grid-template-rows: auto 1fr auto;
grid-template-areas:
"header header header"
"menu main right"
"footer footer footer";
}Qui header e footer si estendono su tutte e tre le colonne, mentre menu, main e right si trovano affiancati nella riga centrale.
Valori
| Valore | Descrizione |
|---|---|
none | Non sono definite aree della griglia denominate. Gli elementi della griglia vengono posizionati con altri metodi (numeri di riga, span o posizionamento automatico). |
<string>+ | Una o più stringhe tra virgolette che disegnano il template. Ogni stringa rappresenta una riga; ogni token separato da spazio bianco in una stringa rappresenta una cella. I token ripetuti formano aree denominate rettangolari; un token . è una cella senza nome (vuota). |
Esempio di layout di base
Il classico layout a shell di pagina — header, sidebar, contenuto e footer — è la dimostrazione più semplice del perché esistono le aree denominate.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.box1 { grid-area: header; }
.box2 { grid-area: menu; }
.box3 { grid-area: main; }
.box4 { grid-area: right; }
.box5 { grid-area: footer; }
.grid-container {
display: grid;
grid-template-areas:
"header header header header header header"
"menu main main main right right"
"menu footer footer footer footer footer";
gap: 10px;
background-color: #ccc;
padding: 10px;
}
.grid-container > div {
background-color: #eee;
text-align: center;
padding: 20px 0;
font-size: 30px;
}
</style>
</head>
<body>
<h2>Grid-template-areas property example</h2>
<div class="grid-container">
<div class="box1">Header</div>
<div class="box2">Menu</div>
<div class="box3">Main</div>
<div class="box4">Right</div>
<div class="box5">Footer</div>
</div>
</body>
</html>Risultato
Celle vuote con i punti
Un token punto posiziona un elemento in nessuna area denominata, lasciando quella cella non occupata. Nell'esempio seguente, item1 si estende sulle prime due colonne di una griglia a cinque colonne; le restanti tre celle in quella singola riga sono vuote.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.box { grid-area: item1; }
.grid-container {
display: grid;
grid-template-areas: "item1 item1 . . .";
gap: 10px;
background-color: #ccc;
padding: 10px;
}
.grid-container > div {
background-color: #eee;
text-align: center;
padding: 30px 0;
font-size: 20px;
}
</style>
</head>
<body>
<h2>Grid-template-areas property example</h2>
<div class="grid-container">
<div class="box">1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
</body>
</html>Layout responsive con le media query
grid-template-areas si abbina naturalmente alle media query: basta riscrivere le stringhe all'interno del blocco del breakpoint e il layout si ridisegna senza modifiche al markup e senza dover rinumerare le linee della griglia.
/* Mobile: single-column stack */
.page {
display: grid;
grid-template-columns: 1fr;
grid-template-areas:
"header"
"menu"
"main"
"footer";
}
/* Desktop: sidebar left, content right */
@media (min-width: 700px) {
.page {
grid-template-columns: 200px 1fr;
grid-template-rows: auto 1fr auto;
grid-template-areas:
"header header"
"menu main"
"footer footer";
}
}Ogni elemento della griglia mantiene il proprio nome grid-area; cambia solo il template. Questo è il motivo principale per cui le aree denominate sono preferite al posizionamento numerico delle linee nei design responsive.
Errori comuni
Le aree devono essere rettangolari
Se lo stesso nome appare in una forma a L, in diagonale o in qualsiasi schema non rettangolare tra le celle, il browser tratta l'intera dichiarazione grid-template-areas come non valida e torna a none. Ogni area denominata deve formare un rettangolo ininterrotto.
/* INVALID — "content" forms an L-shape */
.bad {
grid-template-areas:
"header header"
"content sidebar"
"content content"; /* content is now L-shaped → invalid */
}
/* VALID — "content" is rectangular */
.good {
grid-template-areas:
"header header"
"content sidebar"
"footer footer";
}Tutte le righe devono avere lo stesso numero di colonne
Ogni stringa tra virgolette deve avere lo stesso numero di token separati da spazio bianco. Riempi le righe più corte con token punto in modo che le colonne si allineino:
/* INVALID — row 2 has only 2 tokens, row 1 has 3 */
.bad {
grid-template-areas:
"a a b"
"c c";
}
/* VALID — three tokens in every row */
.good {
grid-template-areas:
"a a b"
"c c .";
}Denominare un'area non ne determina le dimensioni dei track
Le aree denominate indicano al browser quali celle appartengono insieme, non quanto sono grandi quelle celle. Abbina sempre grid-template-areas con grid-template-columns e grid-template-rows:
.container {
display: grid;
grid-template-columns: 180px 1fr; /* sidebar fixed, content fluid */
grid-template-rows: 60px 1fr 40px; /* header, body, footer heights */
grid-template-areas:
"header header"
"nav content"
"nav footer";
}Gli elementi della griglia non abbinati vengono posizionati automaticamente
Se il nome grid-area di un elemento figlio non corrisponde ad alcuna area nel template, il browser lo posiziona automaticamente usando l'algoritmo grid-auto-flow — finisce nella prossima cella implicita disponibile invece di scomparire.
La proprietà abbreviata grid-template
La proprietà grid-template combina grid-template-rows, grid-template-columns e grid-template-areas in un'unica dichiarazione:
.container {
display: grid;
grid-template:
"header header" 60px
"nav content" 1fr
"footer footer" 40px
/ 180px 1fr;
}Le dimensioni delle righe seguono ogni stringa sulla stessa riga; le dimensioni delle colonne vengono dopo la / finale. Il risultato è identico a quello che si otterrebbe scrivendo le tre proprietà separatamente.