Flexbox dovrebbe essere ormai familiare a tutti, anche perché ha già facilitato il lavoro a molti programmatori. Ma cosa succederebbe se si potesse espandere il layout Flexbox non solo verticalmente ma anche orizzontalmente? Questo e altro è possibile da quando é stato integrato il CSS Grid.

Immagina se ci fosse un modo per progettare liberamente il tuo sito web in una griglia bidimensionale. Ad esempio, con cui puoi creare blocchi di testo che si sovrappongono parzialmente alle immagini. O addirittura gallerie di immagini piuttosto complesse senza margine negativo o posizionamento. Oppure grazie ai CSS è possibile progettare rapidamente modelli di pagina anche reattivi. Per tutto questo c'é una soluzione: CSS Grid.

Cos'è la griglia CSS?

Come Flexbox, anche CSS Grid viene integrato grazie all'aiuto di un elemento contenitore e di CSS Grid Items. Cosí ritroviamo, per esempio, anche alcune proprietà per il posizionamento di Flexbox: align-items, justify items, justify self e align-self. Questi ti aiutano a posizionare il contenuto del tuo Grid in modo corrispondente.

In parole povere, CSS Grid è un flexbox, che funziona a 2 dimensioni:

Mentre con Flexbox possiamo costruire righe e colonne corrispondenti solo in orizziontale, CSS Grid ci dà la possibilità di sistemarle anche verticalmente:

A prima vista CSS Grid può sembrare relativamente poco interessante. Dopo tutto si può ottenere lo stesso risultato con righe e colonne.

Cosa rende CSS Grid così particolare?

Con il nuovo Grid System si possono realizzare tutte le combinazioni immaginabili. L'unica condizione è che devono essere rettangolari. Le pure forme a L, per esempio, non possono essere costruite.

In questo modo è possibile pianificare e costruire l'intero layout di pagina basandolo su CSS Grid. Le Grids intrecciate l'una con l'altra sono altrettanto possibili come la combinazione di CSS Grid e Flexbox.

Attraverso una pianificazione intelligente è possibile anche programmare i layout in modo tale da poter fare a meno, per quanto possibile, di Media Queries, anche se naturalmente non è necessario. Approfondirò in seguito le varie possibilità.

CSS Grid viene inoltre con una serie di nuovi trucchi CSS, che in futuro faciliteranno la vita. Uno di questi è la nuova CSS Unit: la cosiddetta frazione (fr), che funziona in modo simile alla divisione delle dimensioni degli elementi Flexbox. 

Una frazione (1fr) è una parte di una riga intera. Quindi se dividi la tua Grid in 3×4 di CSS Tricks, come nell'esempio qui sotto, allora 1fr = ¼ o 25 %.

Qui emerge anche un'altra particolaritá: Non tutte le box devono essere riempite di contenuti. In CSS Grid possono esserci anche contenuti vuoti:

W3Schools mostra altri possibili layout per cui sono adatte le CSS Grid. In questo modo possiamo facilmente definire che determinati elementi devono distribuirsi orizzontalmente e verticalmente su un certo numero di box. E queste  possono avere diverse larghezze (colonne) e altezze (righe).

Nell'esempio qui sopra la prima colonna occupa in percentuale più spazio delle altre. Questo perché la larghezza non è stata predefinita nel CSS e quindi si é orientata automaticamente al contenuto. Lo stesso accadrebbe se creassimo più contenuti di quelli predefiniti per CSS. In questo modo la Grid si allargherebbe automaticamente e aggiungerebbe i nuovi contenuti.

Imondi dello shopping Shopware sono basati su un sistema simile a CSS Grid - almeno in Backend tiew. Nel loro editor WYSIWYG i contenuti possono essere tisualizzati in un Grid, che a prima tista sembra molto simile al CSS Grid. Nella pagina compilata, invece, non tiene utilizzato nessun CSS Grid, per lo meno come impostazione predefinita.

Dal 2017 CSS Grid è supportato da quasi tutti i browser comuni. Solo le versioni di Internet Explorer dalla 10 in poi hanno ancora bisogno del prefisso -ms- per poter visualizzare quasi completamente il CSS Grid. Microsoft Edge, al contrario, dispone già di un'integrazione completa. Ora nulla ti impedisce di usare CSS Grid nei tuoi progetti futuri:

Come funziona CSS Grid nella pratica?

Come già indicato, usiamo la funzione di base come il flexbox. Per prima cosa determiniamo un contenitore, a cui assegnare le funzioni Grid.

.container {
		display: grid;}

Qui ci sono molti altri valori che possono essere assegnati per costruire il Grid secondo i propri desideri:

grid-template-columns, grid-template-rows e grid-template-areas (nel complesso possono anche essere impostati con grid-template ). Queste caratteristiche contengono informazioni sul numero e sulla dimensione delle righe e delle colonne. Puoi anche definire le distanze tra loro con le caratteristichecolumn-gap e row-gap (o gap in breve).

C'è anche la possibilità - come in Flexbox - di determinare la posizione generale all'interno del Grid. A questo scopo esistono le proprietà: justify-items, align-items (breve: place-items), justify-content, align-content (breve: place-content).

Con la proprietà grid-auto-flow puoi anche stabilire in quale direzione deve scorrere la griglia con i valori riga, colonna o denso. Mentre riga e colonna si occupano rispettivamente dell'allineamento orizzontale e verticale, denso determina il riempimento economico della griglia. Ciò significa che con questo valore, la disposizione degli elementi all'interno della griglia può cambiare in determinate circostanze per riempire spazi altrimenti vuoti. Si tratta di una funzione particolarmente interessante per le gallerie di immagini. In questo modo, se necessario, gli elementi si spostano su schermi di dimensioni diverse e non si creano vuoti visivi.

Mentre nel contenitore vengono definite column e row, così come le distanze tra loro, si usano i Grid Item per determinare esattamente dove devono essere posizionate nel Grid. 

Un Grid finito potrebbe quindi apparire come questo sul lato CSS:

.container {
		display: grid;
grid-template-columns: 40px 1fr 1fr 1fr 40px;
grid-template-rows: 25% 100px auto;
gap: .5rem .8rem
justify-items: stretch;}

Ora che hai creato il tuo contenitore Grid, è il momento di riempirlo con i Grid Item. La particolaritá del sistema CSS Grid è che la disposizione nell'HTML può essere secondaria in quanto ad ogni Item si può dare una coordinata iniziale e finale. Questo viene fatto con grid-column-start, grid-column-end, grid-row-start, grid-row-end .

Le coordinate si riferiscono alle Grid Lines e si contano da sinistra a destra, o meglio dall'alto verso il basso. Anche questi possono essere rappresentati in modo abbreviato come grid-column e grid-row. 

Grazie a grid-area gli utenti professionisti possono anche fornire a questi campi tutte le coordinate in una volta sola o dare un nome al tuo Grid Item, la cui posizione puó essere determinata direttamente nel contenitore Grid. Ma non si può solo attribuire un nome ai Grid Item. È anche possibile dare dei nomi alle linee Grid, in modo da poter riferire ai Grid Item le loro coordinate attraverso questi stessi nomi. Il tutto ti risparmia il dover contare.

Anche l'uso di valori negativi, o il contare da sinistra a destra, o dal basso verso l'alto sono possibili. Tuttavia tutto ció é più interessante per gli utenti professionisti di CSS Grid e può essere letto in dettaglio qui:

• Naming Grid Lines

• Naming Grid Areas

Infine all'interno dei Grid Item c'è anche la possibilità di determinare individualmente la posizione dei contenuti. Questo avviene con le caratteristiche: justify-self e align-self (in breve: place-self).

Un Grid Item in CSS potrebbe apparire così:

.item-a {
		grid-column-start: 1;
  		grid-column-end: span 4;
  		grid-row-start: 2;
  		grid-row-end: span 2;
align-self: center;}

Grid row-end e grid-column-end possono essere usati anche con "span +n". Cosí ci si risparmia il noioso conteggio delle linee. "Span 2" dice all'Item che dovrebbe estendersi su due campi Grid. Spiegazioni dettagliate sulle singole caratteristiche si trovano nella Guida ai trucchi CSS.

Esempi dal web

Se sei un tipo visivo come me, hai bisogno di vedere alcuni esempi pratici per comprendere appieno il CSS Grid. Per questo ho navigato un po' su internet per trovare pagine create con CSS Grid, o che potrebbero beneficiare del tuo utilizzo.

Levon Biss ha usato il CSS Grid come strumento di implementazione per creare il tuo portfolio. Se si dá un'occhiata più da ticino alla sua pagina con lo strumento di ricerca, si nota che la pagina è stata costruita con sistemi Grid intrecciati l'uno con l'altro. Innanzitutto la pagina è stata ditisa in tre parti: Header, Main e Footer. L'altezza per l'Header e il Footer è stata predefinita, mentre la parte principale può stilupparsi in modo flessibile in base al contenuto grazie al valore "auto". Le colonne sono state impostate con 1fr su tutta la larghezza disponibile.

.page-wrap {
   height: 100%;
   display: grid;
   grid-template-columns: 1fr;
   grid-template-rows: 96px auto 72px;
}

La parte principale della sua pagina é stata di nuovo inserita in un sistema Grid. Da notare come qui le unità CSS px e fr sono state mescolate. In questo modo il bordo ha una larghezza fissa di 144px ciascuno, mentre la parte centrale rimane flessibile.

.gallery-wrap{
   display: grid;
   grid-template-columns: 144px 1fr 144px;
   grid-template-rows: 1fr;
   height: 100%;
}

Infine anche la galleria è stata ancora una volta intrecciata. All'inizio non sono stati dati dei valori ai Grid Gap. Qundi sono 0. Per la galleria sono stati impostati a 1em. Questo evita l'aggiunta di un margine tra le immagini. Così si possono impostare gli spazi vuoti una volta per tutte nel documento. 

.grid {
   display: grid;
   grid-template-columns: repeat(12,1fr);
   grid-gap: 1em;
}

Un'altra caratteristica particolare di CSS Grid è la funzione repeat(). Questa è una notazione abbreviata di valori che si ripetono. 

Repeat() considera come prima valore l'insieme di valori da creare e come secondo la dimensione. Scritto apparirebbe così:

.grid {
   grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}

In questo esempio non è stato usato nessun CSS Grid. Come nell'esempio precedente avremmo potuto intrecciare il Grid o aggiungere al contenitore Grid un margine per la spaziatura esterna.

Ecco come potrebbe essere la divisione Grid: 

Un possibile approccio ai CSS potrebbe essere il seguente:

.container {
  margin: 0.5em 3em;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: 100px 80px auto;
	gap: .5rem;
}

.logo {
  grid-area: 1 / 1 / 2 / span 3;
  justify-self: start;
}
.nav {
  grid-area: 1 / 4 / 2 / span 3;
  justify-self: end;
}
.header {
  grid-area: 2 / 1 / 3 / span 6;
  justify-self: center;
}
.logo,
.nav,
.header {
  	align-self: center;
}
.img {
  grid-column: span 2;
  grid-row: span 2;
}
.img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

Anche se l'interosito web di Larq avrebbe potuto beneficiare di CSS Grid, ho selezionato solo una piccola area a scopo illustrativo. È proprio qui che diventa molto chiaro il vantaggio di un Grid bidimensionale.

Ecco come potrebbe essere la distribuzione di Grid Item:

Un possibile approccio ai CSS potrebbe essere il seguente:

.container {
  margin: 0.5em 5em;
  display: grid;
  grid-template-columns: repeat(3, 1fr) 50px repeat(3, 1fr);
  grid-template-rows: 3rem 20px 100px 100px;
  gap: 1rem;
}

.heading {
  grid-column-start: 1;
  grid-column-end: 8;
  grid-row-start: 2;
  grid-row-end: 1;
  justify-self: center;
}
.img-a {
  grid-area: 3 / 1 / span 2 / span 1;
}
.img-b {
  grid-area: 3 / 2 / span 1 / span 1;
}
.img-c {
  grid-area: 4 / 2 / span 1 / span 1;
}
.textblock {
  grid-area: -3 / -4 / span 2 / span 2;
  align-self: center;
}

Unisci la griglia CSS e WordPress

Con il nuovo editor WordPress é possibile visualizzare i contenuti anche in righe e colonne per impostazione predefinita. Tuttavia il layout mi fa pensare piuttosto a Bootstrap e Co. e mi manca un po' la bidimensionalità. Questo probabilmente è stato pensato anche da altri e per questo hanno sviluppato il Plugin Grids: Layout builder for WordPress . Il Plugin è gratuito e fa esattamente quello che promette: permette di creare visivamente CSS Grid senza l'aggiunta di un Pagebuilder.

La particolaritá di CSS Grid è la possibilità di sovrapporsi senza usare il margine negativo o il posizionamento assoluto. Esattamente questo è possibile senza problemi con il Plugin. Con l'aiuto dello z-index e anche attraverso la disposizione nello stesso Grid (l'ultimo elemento è in alto, il primo in basso) si possono visualizzare le gerarchie.

L'esempio di cui sopra potrebbe apparire così come sito web:

CSS Grid e @media query

CSS Grid ovviamente può essere usato liberamente con Flexbox e Media Query. Tuttavia c'è un'altra caratteristica nuova che CSS Grid porta con sé: minmax()

Come suggerisce giá il nome, si tratta di valori minimi e massimi. Puó essere usato in connessione con le colonne. A differenza di Media Query qui non viene richiesta la dimensione dello schermo, ma la dimensione dell'elemento. Se la scatola si restringe così tanto da scendere al di sotto della dimensione minima, gli elementi si allargano e si spostano in modo da adattarsi di nuovo.

Minmax() funziona in combinazione con l'auto-fit e può apparire come segue:

.grid {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

Qui si creano delle colonne con una dimensione minima di 240px, ma una dimensione massima di 1fr. In questo esempio 1fr corrisponde all'intera larghezza del Grid. Questo permette a diversi Grid Item di essere uno accanto all'altro, se c'è spazio, ma di usare l'intera larghezza, se non c'è abbastanza spazio.

Ma ci sono anche vantaggi in relazione al media query. Con l'aiuto delle coordinate è possibile posizionare e disporre i Grid Item in modo diverso per ogni dispositivo. Soprattutto nel mobile, dove può prevalere una gerarchia diversa rispetto al desktop, questo può fornire una piacevole esperienza per l'utente.

Tutte le particolaritá in un colpo d'occhio

• FR (frazione) come nuova unità CSS

• Alle aree e alle linee Grid possono essere dati dei nomi

• Grid-column-end, può essere usato con "span n"

• Impostare l'allineamento Grid su "dense" per riempire gli spazi vuoti con elementi

• Dichiara le stesse colonne o righe con repeat()

• Visualizzazione reattiva con l'aiuto di minmax() + auto-fit/auto-fill

• I Grid Item possono essere disposti arbitrariamente in Grid (anche sovrapposti)

Ulteriori fonti di informazione sull'argomento

• Una guida completa per CSS Grid da CSS Tricks
• Una guida per imparare CSS Grid da Learn CSS Grid
• Tutto quello che ti serve per imparare le griglie CSS da Grid by Example
• Metti alla prova le tue capacità: Grid Layout da MDN Web Docs
• Impara tutte le funzioni di CSS Grid giocando con CSS Grid Garden