grid-template-areas: layout con nomi semantici

L’approccio grid-column e grid-row basato sulle linee è molto preciso, ma a volte costringe a ragionare troppo sui numeri di linea.

C’è un secondo modo per posizionare gli elementi in Grid: grid-template-areas.

Ti permette di assegnare un nome a ogni elemento figlio, e poi descrivere la griglia nel contenitore usando quei nomi.

1. Assegnare un nome ai figli

Per prima cosa, diamo un nome alle varie aree della nostra pagina usando la proprietà grid-area. Questo nome non deve avere virgolette.

.intestazione { grid-area: header; }
.barra-laterale { grid-area: sidebar; }
.contenuto-principale { grid-area: main; }
.pie-pagina { grid-area: footer; }

2. Disegnare la griglia nel Genitore

Ora andiamo sul contenitore genitore e usiamo grid-template-areas. Apriamo le virgolette per ogni riga della griglia e scriviamo i nomi delle aree. Se vogliamo che un’area occupi più colonne, ne scriviamo il nome più volte.

.layout-sito {
  display: grid;
  /* Diamo dimensioni di massima a colonne e righe */
  grid-template-columns: 250px 1fr;
  grid-template-rows: 80px 1fr 60px;
  
  /* Disegniamo la mappa. */
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
}

Analisi del disegno:

1. La prima riga "header header" significa che l’intestazione occuperà entrambe le colonne (la sidebar da 250px e il main da 1fr).
2. La seconda riga "sidebar main" significa che la sidebar sta a sinistra, e il contenuto principale a destra.
3. La terza riga "footer footer" significa che il pie di pagina occuperà di nuovo tutta la larghezza in basso.

La potenza nel Responsive Design

Il vantaggio principale di questo approccio è la facilità con cui puoi riadattare il layout per il mobile.

Come facciamo a far diventare la pagina una singola colonna per gli smartphone? Non tocchiamo i figli. Cambiamo solo la “mappa” nel genitore!

@media (max-width: 768px) {
  .layout-sito {
    /* Su mobile è tutto una singola colonna */
    grid-template-columns: 1fr;
    grid-template-areas:
      "header"
      "main"
      "sidebar" /* Sidebar sotto il main su mobile */
      "footer";
  }
}

Lasciare celle vuote

Se vuoi che una cella della griglia rimanga vuota, puoi usare un punto (.).

  grid-template-areas:
    "header header header"
    ". main sidebar" /* La cella in basso a sinistra sarà vuota. */

grid-template-areas è molto adatto ai layout macro, perché rende visibile la struttura generale della pagina direttamente nel CSS.