Basi della griglia

grid-template-columns: repeat(3, 1fr) crea tre colonne uguali in una riga di codice, e il browser mette ogni figlio nella prossima cella libera.

Righe e colonne insieme

La griglia, il modulo CSS Grid Layout, è fatta per l'impaginazione in due dimensioni: righe e colonne insieme. Disegni la griglia sul contenitore e gli elementi cadono nelle sue celle. Il flexbox parte dagli elementi e lascia che trovino da soli le loro dimensioni; la griglia parte dall'impaginazione e ci sistema dentro gli elementi. Per questo è lo strumento naturale per gallerie di foto, elenchi di schede e la forma complessiva di una pagina con intestazione, barra laterale, contenuto principale e piè di pagina.

.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);  /* three equal columns */
  gap: 10px;
}
.gallery .wide { grid-column: span 2; }    /* this item covers two columns */

Tracce e unità fr

grid-template-columns elenca la larghezza di ogni colonna, chiamata traccia. Puoi usare qualsiasi lunghezza, come 200px 1fr, ma la griglia aggiunge un'unità tutta sua: fr, una frazione dello spazio libero. 1fr 1fr 1fr crea tre colonne uguali; 2fr 1fr rende la prima colonna larga il doppio della seconda. L'unità fr divide solo lo spazio che resta dopo le tracce fisse e gli spazi, quindi 200px 1fr dà una barra laterale di 200 pixel e lascia il resto alla colonna principale. repeat(3, 1fr) è un modo più breve di scrivere 1fr 1fr 1fr. grid-template-rows fa lo stesso per le righe, ma spesso le righe si lasciano stare e diventano alte quanto il loro contenuto.

Posizionare gli elementi

Per impostazione predefinita gli elementi riempiono la griglia nell'ordine del sorgente, una cella ciascuno, da sinistra a destra e poi sulla riga successiva. Per ingrandire un elemento, grid-column: span 2 gli fa coprire due colonne, e grid-row: span 2 due righe. Le linee tra le tracce sono numerate da 1, quindi una griglia a tre colonne ha le linee da 1 a 4, e grid-column: 1 / 3 significa dalla linea 1 alla linea 3. grid-column: 1 / -1 allunga un elemento su tutta la larghezza, perché i numeri negativi contano dalla fine.

Dare un nome alle aree

Per l'impaginazione di una pagina, grid-template-areas ti permette di disegnare lo schema con le parole. Ogni stringa tra virgolette è una riga e ogni parola è una cella; ripetere una parola fa estendere un'area su quelle celle. Poi ogni elemento riceve grid-area con il nome corrispondente. Lo schema qui sotto si legge quasi come uno schizzo: l'intestazione in alto, barra laterale e contenuto principale affiancati, il piè di pagina in fondo. Cambiare l'impaginazione per un telefono significa riscrivere solo queste poche stringhe, spesso dentro una media query.

.page {
  display: grid;
  grid-template-columns: 200px 1fr;
  grid-template-areas:
    "head head"
    "side main"
    "foot foot";
  gap: 16px;
}
header { grid-area: head; }
aside  { grid-area: side; }
main   { grid-area: main; }
footer { grid-area: foot; }

Colonne che si adattano allo schermo

Uno schema delle guide di MDN sulla griglia merita di essere imparato a memoria: grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)). minmax(150px, 1fr) dice che ogni colonna deve essere larga almeno 150 pixel e può crescere per dividersi lo spazio, e auto-fill crea tutte le colonne che ci stanno. Il risultato è una galleria che mostra due colonne su un telefono e cinque o sei su uno schermo largo, anche qui senza media query. Come il flexbox, la griglia può disporre gli elementi in un ordine diverso dall'HTML, e vale la stessa cautela: tieni uguali l'ordine di lettura e l'ordine visivo.