Questa pagina è un completamento della guida Come creare un sito da zero

Più complesso da interpretare e configurare, possiamo considerare Grid come la versione avanzata di Flex, utilizzabile là dove non arrivino le funzionalità di quest'ultimo.
Vediamo, quindi, le caratteristiche che Grid ha in più rispetto a Flex.
Il modulo Grid per i layout permette di creare delle griglie non solo allineate su asse singolo, come con il modulo Flexbox, ma anche che si intersecano e si posizionano bidimensionalmente.
Grazie alla sua flessibilità è possibile ottimizzare perfettamente i contenuti per la visualizzazione su mobile.
Per esempio, se con flexbox è possibile fare questo:

Con grid è possibile fare anche questo:

Come per flexbox, parliamo di un contenitore padre e di contenitori figli e il contenitore padre permette di modificare la lunghezza, la larghezza e l'ordinamento dei suoi elementi figli. Ogni elemento figlio (grid item), quindi, a seconda delle impostazioni date, si disporrà in modo differente per riempire lo spazio del contenitore padre e tale disposizione sarà flessibile, cioè si allargherà e restringerà in base alla larghezza dello schermo.
Il contenitore padre può, a sua volta, contenere altri contenitori padri con altri elementi figli ecc.
È anche possibile accostare elementi fissi ad elementi flessibili impostando una larghezza stabilita.
Negli esempi utilizzerò i div come elementi contenitori.

NOTA: non dimenticare di applicare i vendor prefixes alle regole di stile per poter vedere correttamente i risultati su tutti i browser https://autoprefixer.github.io/

Modulo grid, le basi

Il termine "grid" è riassume queste proprietà principali:
grid-template-rows: definisce il numero e la dimensione delle righe in un layout a griglia.
grid-template-columns: definisce la dimensione (larghezza) di ciascuna colonna nel layout a griglia.
grid-template-areas: viene utilizzata con riferimento al nome di ogni area nell'impostazione del layout a griglia.
grid-auto-rows: definisce la dimensione delle righe in un contenitore della griglia se non hanno una dimensione specificata.
grid-auto-columns: specifica la dimensione delle colonne in un contenitore della griglia.
grid-auto-flow: controlla il modo in cui gli elementi posizionati automaticamente vengono inseriti nella griglia.
grid-column: è la proprietà abbreviata che combina le proprietà grid-column-start e grid-column-end. Definisce lo spazio occupato in larghezza da una specifica colonna nel layout a griglia. Più precisamente, definisce la posizione iniziale e finale di una colonna della griglia sull'asse orizzontale. Per esempio: grid-column: 1 / 3; indica che, in una griglia con 3 colonne impostate, la colonna a cui si applica deve occupare, in orizzontale, 2 dei 3 spazi partendo dal primo. Cioè inizia dal primo spazio incluso e finisce al terzo escluso.
Esempio:
grid-row: è la proprietà abbreviata che combina le proprietà grid-row-start e grid-row-end. Definisce lo spazio occupato in lunghezza da una specifica colonna nel layout a griglia. Più precisamente, definisce la posizione iniziale e finale di una colonna della griglia sull'asse verticale. Per esempio: grid-row: 1 / 3; indica che la colonna a cui si applica deve occupare, in verticale, 2 spazi partendo dal primo.
Esempio:

NOTA: sia in grid-column che in grid-row va sempre indicato numericamente lo spazio terminale escluso, anche se non presente materialmente nel layout.

In questa prima guida di base vedremo gli utilizzi più comuni.
Usiamo gli esempi, come sempre, per capire bene il funzionamento.
Lo schema di base, per un padre con 3 figli è questo:

Riporto lo stesso codice completato con le regole di stile utilizzate per il primo esempio di base.

Abbiamo creato un contenitore padre con regola "display:grid" e 3 contenitori figli con contenuto di uguale dimensione. Abbiamo stabilito che la larghezza dei contenitori figli deve essere automatica (grid-template-columns: auto auto auto) e che il contenuto deve essere posizionato al centro. Il risultato saranno tre colonne allineate, della stessa larghezza, che occupano tutto lo spazio del contenitore e che hanno stessa altezza e stessa larghezza.

Esempio 1 (base):

Mettendo un contenuto maggiore in uno o più dei box figli, essi adatteranno le loro dimensioni (larghezza e altezza) al contenuto. Nota: nel primo div figlio il testo si sposta sotto perchè separato da un tag <br>.

Esempio 2:

Lasciando invariata la larghezza massima del contenitore padre e aumentando il numero dei contenitori figli, essi si disporranno automaticamente su più righe in questo modo.

Esempio 3:
Esempio 4:

Differenza tra display:grid e display:inline-grid

Vediamo di spiegarlo in modo molto semplice e pratico, senza la terminologia tecnica utilizzata normalmente che confonde le idee.
Se utilizzate display:grid, il contenitore padre sarà un elemento di blocco, vale a dire che il testo, o gli elementi che precedono o seguono il contenitore padre, appariranno su una riga sopra o sotto di esso.
Se utilizzate display:inline-grid, il contenitore padre sarà un elemento in linea, vale a dire che il testo, o gli elementi che precedono o seguono il contenitore padre, appariranno sulla stessa riga, prima o dopo di esso.
Guardate gli esempi:

dispay:grid

testo sopra testo sotto

display:inline-grid

testo precedente testo seguente

grid-template-areas

Definisce le aree della griglia. Grazie alle aree è possibile muovere gli elementi della griglia e posizionarli come desiderato.
In pratica, si attribuisce un nome ad ogni area della griglia corrispondente ad ogni contenitore figlio identificato dalla classe, o dall'id, o da un tag. Dopodichè si indicano le aree nelle regole di stile del contenitore padre.
Per esempio:

La posizione in cui vengono scritti i nomi delle aree nella regola di stile corrisponde esattamente alla posizione in cui le aree verranno visualizzate nell'anteprima della pagina.
Prendiamo di nuovo il codice di base utilizzato per gli esempi e modifichiamolo in questo modo:

Otteniamo questa visualizzazione:
Cioè con le aree allineate in orizzontale, dato che nelle regole di stile del contenitore padre abbiamo scritto i loro nomi sulla stessa linea e racchiusi nelle stesse virgolette: "area1 area2 area3".
Se scriviamo i nomi uno sopra l'altro, invece e ognuno racchiuso in proprie virgolette, così:

La visualizzazione diventa questa:
Scambiando l'ordine delle aree, esse risulteranno scambiate anche in anteprima, per esempio:

darà il seguente risultato visivo:
NOTA BENE: lavorando con le aree la costruzione deve essere sempre a rettangolo completo, non possono, cioè, essere lasciate zone vuote.
Per incolonnare, ad esempio, due aree differenti in centro, sarà necessario ripetere il nome delle aree laterali in questo modo:

Questo creerà due colonne laterali allungate.
Risultato:

L'unità Fr

1fr (fr=frazione) rappresenta una frazione dello spazio disponibile nel contenitore padre.
Per esempio, la regola:
grid-template-columns: 1fr 2fr 3fr;
Darà questo risultato:
Il primo contenitore figlio occupa 1 frazione dello spazio del contenitore padre, il secondo contenitore figlio occupa 2 frazioni dello spazio del contenitore padre, il terzo contenitore figlio occupa 3 frazioni dello spazio del contenitore padre.
Attenzione! Se i contenitori figli sono 3 e voi indicate, per esempio, il valore della frazione di spazio per i primi due dando al terzo il valore auto, quest'ultimo occuperà solo lo spazio necessario al proprio contenuto, perchè fr vince su auto ed ha sempre la precedenza:
grid-template-columns: 1fr 2fr auto;
Esempio con primo figlio con larghezza fissa (50px). Gli altri figli occupano lo spazio restante secondo la frazione assegnata.
grid-template-columns: 50px 1fr 2fr;

La notazione repeat

La notazione repeat permettere di ripetere la regola per un numero di volte stabilito. È composta da due parti separate da una virgola.
Per esempio, la regola:
grid-template-columns: 1fr 1fr 1fr;
Può essere anche scritta:
grid-template-columns: repeat(3, 1fr);
Oppure, la regola:
grid-template-columns: 1fr 2fr 1fr 2fr 1fr 2fr;
Può essere anche scritta:
grid-template-columns: repeat(3, 1fr 2fr);
Oppure, la regola:
grid-template-columns: 3fr 1fr 2fr;
Può essere anche scritta:
grid-template-columns: repeat(5, 3fr 1fr 2fr);
Se si desidera che l'impostazione venga ripetuta in automatico per 5 volte nei successivi gruppi di 3 contenitori figli, compatibilmente con lo spazio disponibile nel contenitore padre.

La proprietà grid-gap

Questa proprietà specifica la dimensione dello spazio tra le righe e tra le colonne.
Esempi:
grid-gap: 40px;

La proprietà grid-auto-flow

La proprietà grid-auto-flow permette di posizionare automaticamente gli elementi della griglia che non sono posizionati esplicitamente.
Questa proprietà viene utilizzata, normalmente, quando la griglia contiene molte celle.
I valori principali sono:

• row (default), posiziona gli elementi riempiendo ogni riga
• column, , posiziona gli elementi riempiendo ogni colonna
• dense, posiziona gli elementi in modo da riempire, se possibile, eventuali buchi nella griglia

Esempi:
grid-template-columns: auto auto auto;
grid-auto-flow: row;
grid-template-rows: auto auto auto;
grid-auto-flow: column;

Ottimizzazione per il mobile

Le grigle sono lessibili, quindi adattano la loro larghezza alla larghezza dello schermo. Ovviamente, però, ad un certo punto diventerebbero troppo strette per una visualizzazione accettabile. Rimediamo con le media query cambiando la regola display:grig in display:block fino ad una larghezza massima definita dello schermo.
Esempio:

Lavorando con le aree, è possibile, in alternativa, modificarne la posizione impostando l'ordine in cui si devono incolonnare sotto o sopra una definita larghezza dello schermo..
Leggi anche: Il sito responsive e le media queries

Per approfondimenti sulle proprietà del modulo grid, vai al sito ufficiale: https://www.w3.org/TR/css-grid-1/

Esempi di applicazione del modulo grid

Esempio 1 - Vai all'esempio pratico

Esempio 2 - Vai all'esempio pratico

Nella sezione "Strumenti per i webmaster" puoi trovare moltissime soluzioni e risorse da scaricare.