La griglia di uikit per come è stata strutturata ed utilizzata fino a questo momento si dimostra essere un componente perfettamente fluido.

I suoi elementi strutturali utilizzano infatti delle dimensioni in percentuale tali per cui diminuendo o aumentando la dimensione del viewport anche questi diminuiranno o aumenteranno proporzionalmente la loro larghezza.

Come sappiamo però il solo utilizzo di larghezze percentuali non è sufficiente per realizzare layout responsivi. Per ottenere questo risultato è necessario che, in corrispondenza di diverse dimensioni del viewport, si modifichi anche il numero di colonne presenti su di una stessa riga.

Passando ad esempio dallo schermo di un pc ad un tablet il numero di colonne su di una stessa riga dovrebbe passare, ad esempio, da 4 a 2 fino ad arrivare sugli smartphone a linearizzare completamente il layout disponendo quindi una sola colonna per riga.

In questo senso uikit mette a disposizione dell’utente un certo numero di classi che soddisfano appieno queste esigenze (griglia fluida e responsiva).

Tali classi lavorano sostanzialmente come le classi .uk-width-* precedentemente esaminate (si veda il capitolo “Utilizzo Base” della Griglia), hanno nel loro nome i termini small, medium e large e, soprattutto, essendo legate ad apposite media query verranno applicate solo ed esclusivamente in corrispondenza di certi breakpoint.

Vediamole più nel dettaglio:

ATTENZIONE! il carattere * dovrà essere sostituito dal solito sistema di due numeri il primo dei quali indica quante colonne dovranno essere effettivamente occupate da quello specifico componente rispetto al totale in cui si è pensato di suddividere la griglia, mentre il secondo indica proprio questo totale.

ATTENZIONE! le dimensioni in pixel corrispondenti alle sigle small, medium e large (in sostanza i diversi breakpoint) possono essere personalizzate agendo da Customizer oppure operando direttamente all’interno del file uikit.css

Ovviamente è possibile applicare ad un blocco di contenuti più di una classe contemporaneamente, anzi solitamente questa è la prassi in quanto è proprio in questo modo che è possibile specificare quante colonne dovranno esserci per riga in corrispondenza di diverse dimensioni del viewport.

Un esempio chiarisce meglio questi concetti. Prima però di passare ad analizzare questo esempio c’è un’altra considerazione importante da fare.

Nel momento in cui le colonne di una griglia dovessero disporsi su più righe diverse potrebbe nascere il problema della separazione verticale tra i vari blocchi di contenuti su righe diverse.

Il gutter precedentemente analizzato infatti gestisce, come evidenziato, lo spazio di separazione orizzontale tra le colonne e verticale tra griglie successive. Non viene quindi preso in considerazione lo spazio verticale i diversi blocchi di contenuti disposti, all’interno di una stessa griglia, su righe diverse.

Per risolvere questo problema e creare quindi un margine tra blocchi di contenuti disposti, all’interno di una stessa griglia, su righe diverse è necessario aggiungere al Contenitore della Griglia l’attributo data-uk-grid-margin

ATTENZIONE! in assenza dell’attributo data-uk-grid-margin impostato sul Contenitore della Griglia eventuali blocchi di contenuti disposti su righe successive saranno attaccati uno all’altro (nessun gutter verticale). Assegnando invece questo attributo, lo spazio di separazione verticale tra questi elementi seguirà esattamente le stesse regole del gutter orizzontale.

Prendiamo ora in considerazione l’esempio di cui parlavamo prima e supponiamo di dover realizzare una griglia che si comporti in questo modo:

• per viewport large (maggiori o uguali a 960px) 4 blocchi di contenuto di ugual larghezza disposti tutti su di una stessa riga
• per viewport medium (maggiori o uguali a 768px) 4 blocchi di contenuto di ugual larghezza disposti su due righe (2 blocchi per ogni riga)
• in tutti gli altri casi (viewport inferiori a 768px) la griglia dovrà linearizzarsi. I 4 blocchi di contenuto dovranno quindi disporsi uno sotto l’altro in 4 distinte righe e coprire ciascuno l’intera larghezza della griglia.
• Nel momento in cui la griglia si strutturi su più righe, il gutter verticale tra di esse dovrà comportarsi esattamente come il gutter orizzontale

Considerando quanto detto fino ad ora, per ottenere questo risultato dovremo utilizzare un markup di questo tipo:

<div class="uk-grid" data-uk-grid-margin>

<div class="uk-width-large-1-4 uk-width-medium-2-4">

.../*Contenuti della prima colonna*/

</div>

<div class="uk-width-large-1-4 uk-width-medium-2-4">

.../*Contenuti della seconda colonna*/

</div>

<div class="uk-width-large-1-4 uk-width-medium-2-4">

.../*Contenuti della terza colonna*/

</div>

<div class="uk-width-large-1-4 uk-width-medium-2-4">

.../*Contenuti della quarta colonna*/

</div>

</div>

In questo modo, relativamente ai blocchi di contenuto interni alla griglia, per dimensioni del viewport maggiori o uguali a 960px verranno applicate le proprietà relative alla classe .uk-width-large-1-4 e otterremo quindi 4 colonne su di una stessa riga

Ora se avessimo applicato solo la classe .uk-width-large-1-4, come indicato nella precedente tabella, per dimensioni del viewport inferiori a 960px la griglia si sarebbe dovuta linearizzare e i 4 blocchi di contenuti si sarebbero dovuti disporre uno sotto l’altro.

Considerando però che oltre a questa abbiamo utilizzato anche la classe .uk-width-medium-2-4 allora per dimensioni del viewport comprese tra 768px e 959px verranno applicate le proprietà relative a questa classe per cui in questo range i 4 blocchi di contenuto si disporranno su due distinte righe e ognuno di essi avrà una larghezza pari a metà della riga.

Considerando inoltre che al Contenitore della griglia è stato applicato l’attributo data-uk-grid-margin il gutter verticale tra i diversi blocchi di contenuto sarà uguale al gutter orizzontale

Resta ora da capire cosa succede per dimensioni del viewport inferiori a 768px. In questo senso considerando che per queste dimensioni del viewport non è stato specificato nulla (non è stata utilizzata ne la classe .uk-width-small-* ne tanto meno la .uk-width-*), secondo quanto indicato nella precedente tabella per dimensioni inferiori a 768px la griglia si linearizzerà e i blocchi di contenuto si disporranno quindi su 4 righe distinte