CSS Grid - la grande guida per imparare i layout CSS Grid

10 Min.
Layout della griglia CSS - La guida completa per imparare la griglia CSS

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'è CSS Grid? 

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:

What-Is-CSS-Grid 
Come funziona il Grid System con Bootstrap

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

CSS Grid Layout
CSS Grid è uno strumento efficace per creare layout bidimensionali sul web.

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:

CSS-Grid-Empty-Space
Contenuto vuoto in CSS Grid

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).

CSS Grid Best Layouts
Layout in CSS Grid

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 View. Nel loro editor WYSIWYG i contenuti possono essere visualizzati in un Grid, che a prima vista sembra molto simile al CSS Grid. Nella pagina compilata, invece, non viene utilizzato nessun CSS Grid, per lo meno come impostazione predefinita.

CSS Gird Best Practices
Pagina iniziale Shopware ricostruita in Shopping Worlds Designer

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:

Defining CSS Grid
Quali browser supportano CSS Grid 

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 determinare in quale direzione il tuo Grid dovrebbe scorrere con i valori row, column o dense. Mentre row e column si occupano rispettivamente dell'allineamento orizzontale e verticale, dense fa in modo che il tuo Grid venga riempito economicamente. Ciò significa che con questo valore in determinate circostanze la disposizione degli elementi all'interno del Grid può cambiare per andare a riempire uno spazio altrimenti vuoto. Questa è una caratteristica particolarmente interessante per le gallerie di immagini. In questo modo, se necessario, gli elementi si spostano a seconda delle diverse dimensioni degli schermi senza creare 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-columngrid-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:

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 suo utilizzo.

CSS-Grid-In-Practice
CSS Grid per creare un portfolio

Levon Biss ha usato il CSS Grid come strumento di implementazione per creare il suo portfolio. Se si dá un'occhiata più da vicino 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 divisa in tre parti: Header, Main e Footer. L'altezza per l'Header e il Footer è stata predefinita, mentre la parte principale può svilupparsi 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;
}
CSS-Grid-In-Practice
Esempio di sito web senza CSS Grid

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: 

CSS-Grid-Layout
Esempio di sito web con CSS Grid

Un possibile approccio al CSS potrebbe essere questo: 

.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;
}
CSS-Grid-Layout
Anche questo sito potrebbe beneficiare di CSS Grid

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:

CSS Grid Grid Items
CSS Grid su una pagina come esempio

Un possibile approccio al CSS potrebbe essere questo: 

.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;
}

Come si possono combinare CSS Grid 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.

CSS-Grid-Shopify
Il Plugin Grids: Layout builder for WordPress in uso

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:

Come usare CSS Grid 
CSS Grid come esempio pratico

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 insieme a auto-fit e può apparire così: 

.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"
  • Dichiarare le stesse colonne o righe con repeat() 
  • I Grid Item possono essere disposti arbitrariamente in Grid (anche sovrapposti) 

Altre fonti di informazione sull'argomento 

Ha altre domande?

Che domande hai su CSS Grid? Aspettiamo i tuoi commenti. Sei interessato al web design, allo sviluppo e ad altri argomenti WordPress? Allora segui RAIDBOXES su Twitter, Facebook, LinkedIn o tramite la nostra Newsletter.

Dopo aver studiato Game Design e scrittura creativa, si è specializzata nel web e app designe e nel loro sviluppo. La sua attenzione è rivolta alla gamification e al capire la motivazione e l'esperienza dell'utente, insieme alla passione e alla curiosità per i trend tecnologici.

Articoli correlati

Commenti su questo articolo

Scrivi un commento

Il tuo indirizzo e-mail non sarà pubblicato. I campi obbligatori sono contrassegnati con *.