Come indicato nei capitoli iniziali di questa guida, il Gutter altro non è se non lo spazio di separazione tra i diversi elementi (righe e colonne) di una griglia.

Il componente Grid di uikit crea automaticamente uno spazio predefinito, in orizzontale tra le diverse colonne, e in verticale tra due griglie successive.

Lo spazio orizzontale tra le colonne è gestito mediante un padding sinistro impostato sulle colonne stesse.

Lo spazio in verticale tra due griglie successive è gestito invece con un margine alto sulla specifica griglia.

Le regole CSS per la gestione del Gutter sono localizzate tutte nel file uikit.css, all’interno della sezione “Component: Grid”, più esattamente nella sotto sezione “Grid Gutter

Analizzando queste regole possiamo osservare innanzitutto che:

• Per viewport superiori a 1220px lo spazio tra le colonne è di 35px
• Per viewport inferiori a 1219px lo spazio tra le colonne si riduce invece a 25px

Questi sono i valori di default modificabili, come al solito, agendo direttamente all’interno del file uikit.css, dal Customizer o direttamente dallo style editor di Passweb.

Volendo è comunque possibile variare le dimensioni di questo gutter in maniera molto più semplice e uniforme sfruttando tre classi predefinite messe a disposizione da uikit che, se applicate ai giusti elementi, nello specifico al Contenitore della griglia, consentono di impostare automaticamente lo spazio tra le colonne su un valore medio, piccolo o al limite di azzerarlo completamente.

Vediamole più nel dettaglio:

• .uk-grid-medium: applicando questa classe al contenitore della griglia lo spazio tra le colonne, indipendentemente dalle dimensioni del viewport, verrà impostato su di un valore medio, dove per medio si intende, a default, un valore pari a 25px.

• .uk-grid-small: applicando questa classe al contenitore della griglia lo spazio tra le colonne, indipendentemente dalle dimensioni del viewport, verrà impostato su di un valore piccolo, dove per piccolo si intende, a default, un valore pari a 10px

• .uk-grid-collapse : applicando questa classe al contenitore della griglia lo spazio tra le colonne, indipendentemente dalle dimensioni del viewport, verrà completamente azzerato

ATTENZIONE! I valori di default corrispondenti al gutter medio e piccolo possono essere personalizzati agendo direttamente all’interno del file uikit.css

Supponendo dunque di voler realizzare una griglia con tre distinte colonne di contenuti ciascuna delle quali occupi 1/3 dello spazio disponibile separate l’una dall’altra da un gutter piccolo, dovremo utilizzare un markup di questo tipo

<div class="uk-grid uk-grid-small">

<div class="uk-width-1-3">

.../*Contenuti della prima colonna*/

</div>

<div class="uk-width-1-3">

.../*Contenuti della seconda colonna*/

</div>

<div class="uk-width-1-3">

.../*Contenuti della terza colonna*/

</div>

</div>