CONFIGURAZIONE – 2
Considerando quanto visto fino a questo momento dovrebbe ormai essere chiaro che per poter creare e configurare la Griglia di uikit è necessario, oltre ad utilizzare il corretto markup HTML, assegnare specifiche classi tanto al Contenitore della Griglia quanto ai singoli blocchi di contenuto, quindi alle singole colonne, presenti al suo interno.
In particolare la classe .uk-width-*, assegnata ad ogni singolo blocco di contenuti, ci permette di stabilire esattamente la larghezza che quello specifico blocco dovrà assumere all’interno della griglia.
Operare in questo modo è sicuramente utile nel momento in cui dovessimo gestire all’interno della nostra griglia blocchi di contenuti di larghezza diversa.
Nel caso in cui dovessimo invece gestire una griglia con tante colonne tutte della stessa larghezza, anziché andare ad applicare la stessa classe ad ogni singola colonna si potrebbe agire in modo molto più rapido assegnando direttamente al contenitore della griglia una delle classi .uk-grid-width-*, dove il carattere * dovrà, ovviamente, essere sostituito dalla solita coppia di numeri.
Vediamo quindi il significato di queste classi (considerando sempre che la griglia di uikit è in grado di supportare 1,2,3,4,5,6 o 10 colonne)
CLASSE | DESCRIZIONE |
.uk-grid-width-1-2 | Consente di dividere automaticamente la griglia in 2 colonne. Ogni blocco di contenuti inserito all’interno della griglia andrà quindi ad occupare, automaticamente, metà della larghezza complessiva della griglia |
.uk-grid-width-1-3 | Consente di dividere automaticamente la griglia in 3 colonne. Ogni blocco di contenuti inserito all’interno della griglia andrà quindi ad occupare, automaticamente, 1/3 della larghezza complessiva della griglia |
.uk-grid-width-1-4 | Consente di dividere automaticamente la griglia in 4 colonne. Ogni blocco di contenuti inserito all’interno della griglia andrà quindi ad occupare, automaticamente, 1/4 della larghezza complessiva della griglia |
.uk-grid-width-1-5 | Consente di dividere automaticamente la griglia in 5 colonne. Ogni blocco di contenuti inserito all’interno della griglia andrà quindi ad occupare, automaticamente, 1/5 della larghezza complessiva della griglia |
.uk-grid-width-1-6 | Consente di dividere automaticamente la griglia in 6 colonne. Ogni blocco di contenuti inserito all’interno della griglia andrà quindi ad occupare, automaticamente, 1/6 della larghezza complessiva della griglia |
.uk-grid-width-1-10 | Consente di dividere automaticamente la griglia in 10 colonne. Ogni blocco di contenuti inserito all’interno della griglia andrà quindi ad occupare, automaticamente, 1/10 della larghezza complessiva della griglia |
Supponendo ora di voler realizzare una griglia con 5 colonne tutte della stessa larghezza
potremmo quindi utilizzare un markup di questo tipo
<div class="uk-grid .uk-grid-width-1-5">
<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>
.../*Contenuti della quinta colonna*/
</div>
</div>
Come si può osservare dunque non è più necessario assegnare una specifica classe ad ogni colonna in quanto la classe .uk-grid-width-1-5 applicata direttamente al contenitore della griglia farà si che ogni blocco di contenuti presente al suo interno assuma automaticamente una larghezza pari ad 1/5 della larghezza complessiva della griglia stessa.