Una volta compreso come fare a gestire una griglia, sia in termini generali che all’interno di Passweb, gestire poi un sistema di griglie annidate è estremamente semplice.

Si tratta infatti di creare una prima griglia con un certo numero di colonne, seguendo esattamente quanto visto nei precedenti capitoli di questa guida, e di inserire poi all’interno di una (o più) di queste colonne non dei semplici contenuti ma, innanzitutto, la struttura di un’altra griglia.

Utilizzando ad esempio un markup di questo tipo

<div class="uk-grid"> /*Griglia esterna*/

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

... /*Contenuti della prima colonna*/

</div>

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

<div class="uk-grid"> /*Griglia interna alla seconda colonna*/

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

... /*Contenuti della prima colonna della seconda griglia*/

</div>

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

... /*Contenuti della seconda colonna della seconda griglia*/

</div>

</div>

</div>

</div>

otterremo una griglia esterna di due colonne dove nella prima colonna inseriamo un semplice blocco di contenuti mentre all’interno della seconda colonna utilizziamo una seconda griglia mediante che ci consente di dividerla in ulteriori due colonne.