display: grid e definizione esplicita di righe e colonne

Flexbox è fantastico, ma ha un limite intrinseco: è monodimensionale. Può gestire o una riga, o una colonna, ma fa fatica a controllare allineamenti complessi simultaneamente su entrambi gli assi.

CSS Grid Layout è il sistema di impaginazione più potente mai introdotto in CSS. È nativamente bidimensionale: ti permette di progettare un’architettura completa di righe e colonne, e poi posizionare i tuoi elementi esattamente nelle celle (o aree) che preferisci.

Il concetto: Disegnare la piantina della casa

Mentre con Flexbox dici ai figli “Mettetevi in riga e distribuitevi questo spazio”, con Grid il processo è invertito.

Con Grid, tu applichi le regole al Genitore (il Contenitore) per “disegnare” la planimetria dell’edificio (le stanze). Una volta disegnata la griglia, gli elementi figli si incaselleranno automaticamente nelle stanze, oppure potrai posizionarli manualmente in stanze specifiche.

Attivare la griglia

Esattamente come con Flexbox, tutto inizia applicando la proprietà display al genitore.

<div class="scacchiera">
  <div class="cella">1</div>
  <div class="cella">2</div>
  <div class="cella">3</div>
  <div class="cella">4</div>
</div>

.scacchiera {
  display: grid;
  /* Fino a qui non cambia nulla visivamente, dobbiamo definirla! */
}

A differenza di display: flex (che dispone subito gli elementi in riga), display: grid da solo si limita a creare una griglia con una sola colonna (quindi gli elementi rimangono impilati l’uno sull’altro).

Per rendere la griglia utile, dobbiamo definire esplicitamente quante colonne e quante righe vogliamo.

grid-template-columns e grid-template-rows

Queste due proprietà si applicano al contenitore e definiscono letteralmente la struttura della griglia. Ogni valore che inserisci definisce una nuova traccia (riga o colonna) e la sua dimensione.

.scacchiera {
  display: grid;
  /* Crea 2 colonne: la prima larga 100px, la seconda larga 200px */
  grid-template-columns: 100px 200px;
  
  /* Crea 2 righe: ciascuna alta 50px */
  grid-template-rows: 50px 50px;
  
  gap: 10px; /* Funziona esattamente come in Flexbox! */
}

Cosa farà il browser?

Il browser costruirà un reticolo formato da 4 celle in totale (2x2). Avendo 4 figli .cella nell’HTML, il browser prenderà il primo e lo inserirà nella cella in alto a sinistra. Prenderà il secondo e lo metterà in alto a destra. Il terzo andrà in basso a sinistra, e il quarto in basso a destra. Tutto in modo completamente automatico!

Se aggiungi un quinto figlio nell’HTML, il browser creerà automaticamente una nuova riga, chiamata riga implicita, per fargli spazio, anche se tu ne avevi definite solo due.

Nel prossimo capitolo vedremo un’unità di misura speciale (fr) inventata appositamente per CSS Grid, che renderà obsoleti i vecchi sistemi basati su percentuali.