CSS Grid ci permette di definire la posizione degli elementi anche usando riferimenti nominali.
Supponiamo di avere un layout a due colonne con header e footer. La struttura HTML è la seguente:
<section id="site">
<header id="site-header"></header>
<section id="content"></section>
<aside id="navigation"></aside>
<footer id="site-info"></footer>
</section>
Definiamo subito gli stili di base del contenitore:
#site {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr 1fr;
grid-template-areas:
"header header"
"navigation navigation"
"content content"
"site-info site-info"
;
}
@media screen and (min-width: 768px) {
#site {
grid-template-areas:
"header header"
"content navigation"
"site-info site-info"
;
max-width: 960px;
margin: 0 auto;
}
}
grid-template-columns stabilisce che questa griglia avrà due colonne. 1fr usa la nuova unità di misura fraction che da sola esegue i calcoli sulla ripartizione dello spazio.
grid-template-rows stabilisce che questa griglia avrà quattro righe. grid-template-areas definisce la disposizione degli elementi sulla griglia usando i riferimenti nominali definiti su ciascun elemento con la proprietà grid-area.
Tenendo a mente che abbiamo due colonne, "header header" vuol dire che l'header occuperà entrambe le colonne in orizzontale, mentre "content navigation", significa che il contenuto andrà sulla colonna di sinistra e la navigazione su quella di destra. L'ordine in cui appaiono questi valori è rilevante. Ecco come vengono definiti sugli elementi.
#site-header {
grid-area: header;
background-color: green;
}
#content {
grid-area: content;
background-color: silver;
}
#navigation {
grid-area: navigation;
background-color: yellow;
}
#site-info {
grid-area: site-info;
background-color: orange;
}
Come si può notare, questa caratteristica rende estremamente facile la costruzione di layout con i CSS.