Nuove specifiche CSS3: Grid Layout

Chi lavora con CSS da un po’ di anni sa benissimo quali e quante novità ha introdotto (e continua ad introdurre) CSS3.
Basti pensare a come si faceva frontend prima dell’introduzione delle nuove specifiche: sicuramente c’era un utilizzo maggiore di immagini (nel tempo ampiamente sostituito dalla possiblità di creare forme, angoli arrotondati, gradienti e animazioni).

Ci tocca ammettere, tuttavia, che per quanto ci siano state novità interessati dal punto di vista grafico della costruzione della pagina, dal lato del layout CSS non si è evoluto altrettanto velocemente.

Certo, l’introduzione di Flexbox ha portato con sè aria di cambiamento, ma la maggior parte delle strutture dei siti che sviluppiamo (siano esse basate su sviluppo custom o su framework come Bootstrap e Foundation) è ancora basata sull’utilizzo della proprietà f​loat.​

Fortunatamente ci aspettano grandi novità con la futura introduzione della specifica CSS Grid  Layout, attualmente ancora in sviluppo (Working Draft status).

Di cosa si tratta? 

CSS Grid Layout è una specifica che ci permetterà di creare griglie bidimensionali, configurarle a nostro piacimento e posizionare gli elementi della pagina esattamente dove lo richiedono i mockup e la grafica.

E’ importante non intendere Grid Layout come sostitutivo di Flexbox, in quanto quest’ultimo è pensato per creare layout monodimensionali e disporre elementi lungo un’unica riga continua.

Possiamo supporre che in futuro andremo ad utilizzare entrambi i moduli: Grid Layout per la struttura generale della pagina e Flexbox per gli elementi più piccoli della UI.

Come si utilizza?

Per creare una griglia basterà creare un contenitore degli elementi da posizionare e assegnare alla proprietà ​display i​ valori​ grid o​​ inline-­grid, ​per poi configurare righe e colonne. 

Quindi, se questo è il mio html:

questo sarà il mio css: 

.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(3, auto);
}La mia griglia ha 4 colonne di uguale larghezza e 3 righe, che si espanderanno in altezza a seconda del contenuto. repeat si usa per ripetere il pattern dopo la virgola il numero di volte dichiarato prima della virgola.
Quindi, riprendendo l’esempio sopra, avrei potuto scrivere anche:

grid­-template­-columns: 1fr 1fr 1fr 1fr;Ora tutti gli elementi direttamente figli del contenitore ​.grid​possono essere posizionati nella griglia in due modi differenti: dichiarando l’ingombro dell’elemento oppure assegnandolo ad un’area del template.

Metodo 1: dichiarare l’ingombro dell’elemento 

La griglia che abbiamo costruito ha 4 colonne, quindi 5 linee verticali (considerando la linea di chiusura dell’ultima colonna) a cui possiamo “agganciare” gli elementi della pagina e 3 righe. Per andare a creare una struttura con header e footer che occupino un’intera riga e contenuto e colonna che si affianchino, andrò a scrivere il seguente css: 

header { grid-column: 1 / 5; grid-row: 1; } .main-content { grid-column: 1 / 4; grid-row: 2; } aside { grid-column: 4 / 5 ; grid-row: 2; } footer { grid-column: 1 / 5; grid-row: 3; }La proprietà ​grid­-column​ è uno shorthand per g​rid­-column­-start​ e grid­-column-­end.​

Come si può intuire, il valore prima dello slash è quello della linea di partenza, mentre quello dopo è relativo alla linea finale. Quindi, per esempio, l’elemento header​ inizia alla linea 1 e termina all’ultima linea, prendendo la totalità dello spazio della riga. E’ interessante sottolineare che non c’è bisogno di inserire un ​clear​ dopo ogni ​row, ​in quanto non sono coinvolti float e ogni riga ha la sua altezza che spinge in basso la riga successiva.

Metodo 2: assegnare all’elemento un’area del template 

All’elemento ​.grid​ è possibile assegnare una dichiarazione delle aree del template, utilizzando la proprietà ​grid­-template­-areas:​

.grid { display: grid; grid­-template­-columns: repeat(4, 1fr); grid­-template-­rows: repeat(3, auto); grid­-template­-areas: "header header header header" "content content content sidebar" "footer footer footer footer"; }Con questa proprietà andiamo a creare aree del template assegnando nomi a nostra scelta; se il nome viene ripetuto più di una volta nella stessa dichiarazione di riga, signfica che occuperà il numero di colonne pari al numero di ripetizioni. Nel nostro esempio, ​header​ e ​footer occupano tutte e 4 le colonne della riga, mentre ​content​ ne occupa solo 3 e s​idebar ​1.

Nel caso volessimo lasciare una colonna vuota, basta inserire un punto (.) al posto del nome dell’area.
Ora basterà assegnare le aree create agli elementi della pagina:

header { grid-­area: header; } .main­content { grid­-area: content; } aside { grid­-area: sidebar; } footer { grid­-area: footer; }

Responsive layout 

Come è facile immaginare, è possibile ridefinire la griglia a breakpoint diversi. Questo, sommato alla possibilità di posizionare liberamente elementi non consecutivi nell’html, dà agli sviluppatori, ma anche a chi progetta l’architettura del sito, la libertà di ordinare i contenuti della pagina in maniera più accessibile ed usabile a seconda del dispositivo dal quale la si visualizza.

In conclusione 

Se siete emozionati quanto me riguardo questa nuova feature, non vi resta che aspettare che venga rilasciata ufficialmente (e supportata dai browser!).

Nel frattempo potete approfondire l’argomento e tenervi aggiornati consultando la pagina ufficiale del progetto oppure cominciare a vedere qualche esempio di implementazione,​ricordandovi di attivare CSS Grid Layout nel vostro browser prima di testare gli esempi (https://igalia.github.io/css-grid-layout/enable.html)​.