La griglia di uikit utilizza il modulo CSS3 Flexible Box Layout (più noto, semplicemente, come Flexbox). Grazie ad esso le colonne disposte su di una stessa riga assumono tutte, automaticamente, la stessa altezza (che sarà quindi stabilita da quella con il maggior numero di contenuti)

Il problema in questo senso è rappresentato dal fatto che non tutte le versioni dei browser attualmente in commercio supportano correttamente le specifiche del CSS3 (e tra queste anche il modulo Flexbox).

Per garantire quindi che le colonne di una stessa riga della griglia mantengano tutte la stessa altezza anche nei browser più datati è sufficiente aggiungere al contenitore esterno della griglia l’attributo data-uk-grid-match

Il markup del contenitore esterno della griglia dovrà quindi essere il seguente

<div class="uk-grid" data-uk-grid-match>...</div>

In Passweb questo attributo andrà inserito nell’apposito campo della maschera di configurazione del Componente utilizzato per definire il contenitore della griglia

Nel momento in cui le colonne dovessero disporsi su più righe quanto detto fino ad ora potrebbe non essere più valido nel senso che all’interno di ogni singola riga le colonne manterranno tutte la stessa altezza ma tra righe diverse potremmo anche avere colonne con altezza diversa.

Se l’esigenza dovesse essere quella di ottenere colonne con la stessa altezza anche su righe diverse sarà sufficiente assegnare al contenitore della griglia l’attributo data-uk-grid-match="{row: false}"

Un’ultima osservazione interessante da fare, relativamente a questo argomento, è quella che riguarda il caso in cui vengano inseriti all’interno delle colonne dei componenti Pannello (per maggiori informazioni sul componente Pannello di uikit si vedano anche i successivi capitoli di questa guida).

In queste condizioni potremo gestire l’altezza di questi Pannelli in due modi diversi:

• Ogni Pannello mantiene una sua specifica altezza dettata esclusivamente da quelli che sono i contenuti inseriti all’interno del pannello stesso

• I Pannelli inseriti all’interno delle diverse colonne hanno tutti la stessa altezza esattamente come avviene già per le colonne della griglia

Nel primo caso (Pannelli con altezza diverse) non è necessario fare nulla essendo questo il comportamento di default

Se invece l’esigenza dovesse essere quella di mantenere la stessa altezza anche per i Pannelli inseriti all’interno delle diverse colonne, sarà necessario assegnare al contenitore della griglia la classe .uk-grid-match

Infine, per garantire questo stesso funzionamento anche su browser più datati oltre alla suddetta classe sarà necessario assegnare al contenitore della griglia anche il seguente attributo data-uk-grid-match="{target:'.uk-panel'}"