GRIGLIA RESPONSIVA – 2
Le classi .uk-grid-width-* applicate al contenitore della griglia consentono, come visto, di suddividere automaticamente la griglia stessa in un certo numero di colonne tutte esattamente della stessa larghezza.
Va detto però che tali classi, al pari di quelle del tipo .uk-width-*, non conferiscono alla griglia un comportamento responsivo
Uikit risolve anche questo problema mettendo a disposizione dell’utente un’ insieme di classi da applicare sempre al contenitore della griglia, che consentono sempre di suddividere automaticamente la griglia stessa in un certo numero di colonne tutte della stessa larghezza e che, inoltre, le conferiscono anche un comportamento responsivo permettendo all’utente di indicare quante colonne dovranno essere effettivamente disposte su di una stessa riga in corrispondenza di viewport piccoli, medi, grandi ecc…
Queste nuove classi sono, in sostanza, il corrispettivo di quelle esaminate nel capitolo “Griglia Responsiva – 1” solo che essendo applicate non al singolo blocco di contenuti ma direttamente al contenitore della griglia, conterranno nel loro nome anche la parola grid.
Vediamole più nel dettaglio:
CLASSE – Applicata al Contenitore della Grigla | DESCRIZIONE |
.uk-grid-width-* | Le proprietà di questa classe verranno applicate per una qualsiasi larghezza del viewport. Le colonne della griglia avranno tutte la stessa larghezza e si posizioneranno una a fianco all’altra |
.uk-grid-width-small-* | Le proprietà di questa classe verranno applicate per larghezze del viewport maggiori o uguali a 480px Le colonne manterranno tutte la stessa larghezza e per viewport inferiori ai 480px si disporranno una sopra l’altra |
.uk-grid-width-medium-* | Le proprietà di questa classe verranno applicate per larghezze del viewport maggiori o uguali a 768px Le colonne manterranno tutte la stessa larghezza e per viewport inferiori ai 768px si disporranno una sopra l’altra |
.uk-grid-width-large-* | Le proprietà di questa classe verranno applicate per larghezze del viewport maggiori o uguali a 960px Le colonne manterranno tutte la stessa larghezza e per viewport inferiori ai 960px si disporranno una sopra l’altra |
.uk-grid-width-xlarge-* | Le proprietà di questa classe verranno applicate per larghezze del viewport maggiori o uguali a 1220px Le colonne manterranno tutte la stessa larghezza e per viewport inferiori ai 1220px si disporranno una sopra l’altra |
ATTENZIONE! il carattere * dovrà essere sostituito dal solito sistema di due numeri. In questo caso però il primo numero dovrà essere sempre 1 mentre il secondo variando tra 1, 2, 3, 4, 5, 6 e 10 indicherà esattamente il numero di colonne in cui dividere la griglia
ATTENZIONE! le dimensioni in pixel corrispondenti alle sigle small, medium, large e xlarge (in sostanza i diversi breakpoint) possono essere personalizzate agendo da Customizer oppure operando direttamente all’interno del file uikit.css
Anche in questo caso ovviamente è possibile applicare ad un blocco di contenuti più di una classe alla volta in maniera tale da specificare quante colonne dovranno esserci per riga in corrispondenza di diverse dimensioni del viewport.
Consideriamo, in questo senso, lo stesso esempio esaminato nel capitolo “Griglia Responsiva – 1” e supponiamo dunque 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
Per ottenere questo risultato potremo utilizzare ora un markup di questo tipo:
<div class="uk-grid uk-grid-width-large-1-4 uk-grid-width-medium-1-2" data-uk-grid-margin>
<div>
.../*Contenuti della prima colonna*/
</div>
<div>
.../*Contenuti della seconda colonna*/
</div>
<div>
.../*Contenuti della terza colonna*/
</div>
<div>
.../*Contenuti della quarta colonna*/
</div>
</div>
In questo modo per dimensioni del viewport maggiori o uguali a 960px verrà applicata la classe uk-grid-width-large-1-4 definita sul contenitore della griglia; ogni colonna assumerà automaticamente una larghezza pari ad 1/4 della griglia stessa e otterremo quindi 4 blocchi di contenuto di ugual larghezza posti tutti sulla stessa riga
Se avessimo applicato solo la classe .uk-grid-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, sul contenitore della griglia, anche la classe .uk-grid-width-medium-1-2 allora per dimensioni del viewport comprese tra 768px e 959px verranno applicate le proprietà relative a questa classe per cui in questo range le 4 colonne della griglia assumeranno ciascuna una larghezza pari a metà della griglia stessa disponendosi su due righe distinte.
Considerando inoltre che al Contenitore della griglia è stato applicato anche l’attributo data-uk-grid-margin il gutter verticale tra i diversi blocchi di contenuto sarà uguale al gutter orizzontale
Infine, non essendo stato specificato nulla per dimensioni del viewport inferiori a 768px (non è stata utilizzata ne la classe .uk-gridi-width-small-* ne tanto meno la .uk-grid-width-*), in queste condizioni la griglia si linearizzerà e i blocchi di contenuto si disporranno uno sotto l’altro su 4 righe distinte
