CSS Grid da zero: colonne, righe, fr, repeat(), minmax()

Flexbox gestisce una dimensione alla volta, riga o colonna. CSS Grid è pensato per entrambe insieme: righe e colonne che si controllano nello stesso momento, come una vera griglia bidimensionale, perfetto per il layout dell'intera pagina, non solo di una singola fila di elementi.

1. grid-template-columns/rows e l'unità fr

display: grid trasforma un elemento in un grid container. grid-template-columns e grid-template-rows definiscono quante tracce ci sono e quanto sono grandi.

.contenitore {
    display: grid;
    grid-template-columns: 200px 1fr 1fr;
    grid-template-rows: 100px auto;
}

L'unità fr (fraction) rappresenta una quota dello spazio rimanente: nell'esempio sopra, tolti i 200px fissi, lo spazio restante si divide in due parti uguali. È l'equivalente, per Grid, di flex-grow in flexbox.

Fonte: MDN Web Docs, «grid-template-columns»: fr specifica il fattore di flessibilità di una traccia; ogni traccia in fr riceve una quota dello spazio libero proporzionale al suo valore.

2. Grid line numbering: si numerano le linee, non le celle

Punto concettuale spesso frainteso: quando definisci una griglia, definisci le tracce (colonne e righe), ma Grid ti dà in cambio delle linee numerate, a partire da 1, che usi per posizionare gli elementi. Una griglia a tre colonne ha quattro linee di colonna, non tre.

.contenitore {
    display: grid;
    grid-template-columns: repeat(3, 1fr);  /* 3 colonne = 4 linee: 1,2,3,4 */
}

.elemento-largo {
    grid-column: 1 / 3;  /* dalla linea 1 alla linea 3: occupa le prime 2 colonne */
}

Fonte: MDN Web Docs, «Basic concepts of grid layout»: quando definisci una griglia, definisci le tracce, non le linee; Grid genera linee numerate a partire da 1, in base al writing mode del documento.

3. repeat() e minmax(): meno ripetizione, più flessibilità

repeat() evita di scrivere lo stesso valore più volte. minmax(min, max) imposta un intervallo per una traccia: non scende sotto il minimo, non supera il massimo.

/* invece di: grid-template-columns: 1fr 1fr 1fr 1fr; */
grid-template-columns: repeat(4, 1fr);

/* colonne che non scendono mai sotto 150px, ma possono crescere */
grid-template-columns: repeat(3, minmax(150px, 1fr));

Combinati, risolvono un problema molto comune: card di larghezza minima garantita, che comunque si distribuiscono lo spazio in eccesso.

Fonte: MDN Web Docs, «repeat()»: permette di ripetere una porzione della lista di tracce; «minmax()»: definisce un intervallo di dimensione per una traccia.

4. auto-fill contro auto-fit: il pattern responsivo, e la differenza vera

Sostituendo il numero di ripetizioni con auto-fill o auto-fit, il browser calcola da solo quante colonne entrano nello spazio disponibile: un layout a griglia responsivo senza una sola media query.

.griglia-responsiva {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 20px;
}

La differenza tra i due si vede solo quando ci sono meno elementi delle colonne possibili: auto-fill mantiene le colonne vuote (occupano comunque spazio, restando pronte per elementi futuri); auto-fit le collassa a zero, lasciando che gli elementi esistenti si allarghino a riempire tutto lo spazio.

Sono due modi di preparare i tavoli in un ristorante con meno clienti del previsto. auto-fill tiene comunque apparecchiati i tavoli vuoti, pronti per altri ospiti. auto-fit toglie i tavoli vuoti e allarga quelli occupati, per non lasciare spazi morti nella sala.

Fonte: MDN Web Docs, «CSS grid layout» (Learn web development): repeat(auto-fit, minmax(...)) crea tante colonne quante ne entrano, distribuendo lo spazio residuo; la differenza con auto-fill riguarda le tracce vuote quando gli elementi non riempiono tutte le colonne disponibili.

In sintesi

Grid e flexbox non sono in competizione: Grid organizza la struttura a due dimensioni della pagina; flexbox allinea il contenuto dentro ciascun blocco di quella struttura. Nella pratica, si usano quasi sempre insieme.