Introduzione
Correva l’anno 2009 e, dopo il lungo periodo di transizione che ci separava dall’utilizzo delle tabelle e la nascita dei fogli di stile, la parentesi “Flash e Silverlight” era in via di chiusura. Bisognava, quindi, trovare nuove strade per poter sviluppare layout web accattivanti in maniera agevole. Nuovi strumenti iniziavano a farsi strada: i Framework CSS Blueprint CSS, YUI Grids ed il famosissimo 960 Grid System (960gs per gli amici).
Tutti portavano nel mondo del web design il concetto di “griglia”, ripreso direttamente dal mondo della grafica editoriale per la stampa. Il resto della storia è noto: con l’avvento del responsive design sono nati nuovi framework, come Bootstrap, Foundation, UI Kit, Skeleton, Pure.css ed altri dotati di un sistema a griglia fluida, in grado di adattarsi ai display degli innumerevoli dispositivi presenti sul mercato.
L’esigenza è chiara: per progettare le interfacce per il web, abbiamo bisogno di una griglia flessibile.
L’impiego dei Framework CSS implica, però, un utilizzo massiccio di elementi di markup puramente strutturali inseriti direttamente nell’HTML, che sporcano di fatto il codice. Non vi ricorda un po’ il sistema utilizzato per costruire i layout con le tabelle? L’uso improprio del tag “table” è stato uno dei tanti motivi che hanno portato poi alla nascita dei fogli di stile.
Per far fronte al problema dell’utilizzo eccessivo dei Framework, nasce Grid Layout ed è la prima volta in assoluto che un modulo CSS viene creato esclusivamente per la gestione della UI. Infatti, nessuna delle tecnologie presenti nelle specifiche precedenti era stata pensata per la costruzione di interfacce web: tutte le soluzioni erano frutto di ingegnosi hack, in grado di soddisfare svariate esigenze.
La proprietà float, ad esempio, era nata per fare in modo che le foto potessero “galleggiare” all’interno dei blocchi di testo, anche se per anni è stato utilizzato (e lo è ancora) per costruire i layout basati su elementi flottanti (float left o right) e relativi reset (clear left, right o both). Purtroppo, però, ogni browser interpretava la proprietà in modo differente. Inoltre, era tipico l’utilizzo della proprietà overflow: hidden o dell’ingegnosa classe .clearfix, per risolvere il bug degli sfondi “ghigliottinati” (https://complexspiral.com/publications/containing-floats/).
Poi è arrivato Flexbox e ha portato con sé una serie di novità e strumenti in grado di risolvere molte delle problematiche legate alla UI. Sfortunatamente, però, è stato pensato per gestire strutture monodimensionali: per quelle bidimensionali, invece, bisogna ricorrere a CSS Grid.
CSS Grid fu presentato al W3C nel 2011 da Phil Cupp (qui il link della prima working draft: https://www.w3.org/TR/2011/WD-css3-grid-layout-20110407/), in quel periodo a capo del team di UI per lo sviluppo del nuovo “Microsoft Intune”. Il suo obiettivo era quello di riuscire a portare nella specifica CSS uno dei moduli più interessanti di Silverlight: il Grid Layout.
In precedenza, anche altri sviluppatori avevano inviato al W3C delle proposte di Grid, ma quella presentata da Phil Cupp e il suo team si basava su qualcosa di già testato e funzionante su Silverlight, quindi bisognava solo adattarla. La sua specifica, che fu poi implementata in IE10 tramite il vendor prefix -ms-, è stata successivamente revisionata, migliorata e riscritta grazie al contributo di altri sviluppatori.
Una video-intervista ai protagonisti che hanno realizzato CSS Grid è disponibile a questo link: https://channel9.msdn.com/Blogs/msedgedev/Creating-CSS-Grid.
Uno dei più grandi vantaggi dell’utilizzo di CSS Grid è innanzitutto il supporto per la realizzazione di layout bidimensionali, e poi la possibilità di apportare le modifiche strutturali direttamente nel foglio di stile, senza necessariamente stravolgere il markup HTML.
Andiamo subito a toccare con mano le grandi potenzialità di CSS Grid.
Primi passi
Useremo la metodologia BEM per denominare le classi assegnate ai vari elementi e Sass (SCSS) per scrivere il nostro CSS. Per il rendering utilizzeremo Firefox, perché attualmente è l’unico browser che, tramite il tool “ispeziona elemento”, permette di visualizzare la numerazione assegnata alle righe.
Partiamo da questo esempio di codice:
<div class="wrapper">
<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box">Box 3</div>
<div class="box">Box 4</div>
<div class="box">Box 5</div>
<div class="box">Box 6</div>
</div>
.wrapper {
background: #ddd;
width: 900px;
margin: auto;
}
.box {
padding: 15px;
outline: 1px solid #000;
}
In questo caso, abbiamo definito un div con classe .wrapper con al suo interno dei box nidificati. Vogliamo ottenere un template costituito da 2 righe con altezza fissa pari a 150 px e 3 colonne, ciascuna colonna dovrà essere larga 300px:
In un framework tipo Boostrap, avremmo dovuto inserire degli elementi strutturali come .row e .col-* per definire la griglia. Con CSS Grid, invece, basterà semplicemente assegnare la proprietà display: grid all’elemento con la classe .wrapper:
.wrapper {
background: #ddd;
width: 900px;
margin: auto;
display: grid;
}
Andremo adesso a definire una larghezza di 300px per ciascuna colonna. Per farlo, utilizzeremo la proprietà grid-template-columns e per ottenere 3 colonne dovremo scrivere lo stesso valore per 3 volte consecutive, come in questo esempio:
.wrapper {
display: grid;
grid-template-columns: 300px 300px 300px;
}
La riga ha un’altezza di default impostata su auto e si adatterà in base al contenuto. Se invece vogliamo stabilire un valore fisso, utilizzeremo la proprietà grid-template-rows:
.wrapper {
display: grid;
grid-template-columns: 300px 300px 300px;
grid-template-rows: 300px 100px;
}
In questo caso, per la prima riga abbiamo stabilito un’altezza di 300px, 100px per la seconda. Per ottenere invece 2 righe della stessa altezza, anche in questo caso, scriveremo lo stesso valore 2 volte:
grid-template-rows: 150px 150px;
Per evitare di inserire più volte lo stesso valore, possiamo utilizzare la funzione repeat. Seguendo questa formula possiamo definire altezza e larghezza delle colonne:
repeat( [numero colonne o righe], [altezza o larghezza]);
.wrapper {
display: grid;
grid-template-columns: repeat(3, 300px);
grid-template-rows: repeat(2, 150px);
}
Se impostiamo un’altezza fissa per le prime 2 righe, per le eventuali altre in aggiunta l’altezza sarà automatica:
Grazie a questa formula, invece, possiamo stabilire una larghezza uguale e ripetuta per le prime due colonne (200px), invece la terza colonna sarà più stretta (100px):
grid-template-columns: repeat(2, 200px) 100px;
Se invece volessimo far occupare all’ultima colonna tutto lo spazio disponibile, la specifica CSS Grid ci offre una nuova unità di misura relativa: la frazione (fr).
Quindi la nostra formula sarà trasformata in:
grid-template-columns: repeat(2, 200px) 1fr;
dove l’ultimo valore (1fr) è relativo, si adatta quindi allo spazio disponibile.
Possiamo allora utilizzare la stessa soluzione per fare in modo che la larghezza di tutte le colonne si adatti automaticamente a quella del contenitore padre:
grid-template-columns: repeat(3, 1fr);
Per impostare un’altezza fissa a tutte le righe, anche quelle che vengono generate dinamicamente, al posto di grid-template-rows, possiamo utilizzare la proprietà grid-auto-rows, come nel seguente esempio:
grid-auto-rows: 150px;
In questo caso, il valore numerico dovrà essere definito una sola volta. Ecco il risultato:
Il codice CSS sarà quindi il seguente:
.wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: 150px;
}
Possiamo utilizzare le frazioni anche sulle row, ma dobbiamo definire un’altezza fissa per l’elemento .wrapper:
.wrapper {
height: 900px;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: 1fr;
}
Nel prossimo articolo vedremo come realizzare il nostro primo layout con CSS Grid, andando ad analizzare le grandi potenzialità di questo approccio.
Alla prossima!
