Il Grid System o Sistema a Griglia altro non è se non un sistema di suddivisione degli spazi di una pagina web particolarmente utile per cerare design proporzionati, efficaci e semplici da gestire.

In parole povere si tratta di suddividere la pagina web in un certo numero di righe e ogni riga in un certo numero di colonne immaginarie di dimensione fissa e separate da un margine (detto gutter) prestabilito.

In questo modo quando dovremo decidere la dimensione (in larghezza) di un certo elemento potremo ragionare non più in termini assoluti (pixel, punti e altro) ma in termini appunto di “colonne”.

Un blocco di contenuti inserito all’interno di una riga non avrà più una larghezza di 100px o del 10% della larghezza del contenitore padre, ma occuperà ad esempio 1 delle N colonne in cui avevamo pensato di suddividere la riga in esame. L’unità di misura diventa quindi “la colonna” e l’effettiva larghezza di un blocco di contenuti dipenderà da quante colonne occupa e da quante sono le N colonne in cui avevamo pensato di suddividere la riga

Nell’esempio illustrato in figura si è pensato di suddividere:

• la prima e la quarta riga in una sola colonna.

In queste condizioni se dovessimo decidere di posizionare all’interno di queste righe un blocco di contenuti e di fargli occupare una colonna, la sua effettiva larghezza sarà ovviamente pari al 100% e andrà quindi ad occupare interamente la riga in esame

• la seconda riga in due colonne.

In queste condizioni se dovessimo decidere di posizionare all’interno di questa riga un blocco di contenuti e di fargli occupare una sola colonna, la sua effettiva larghezza sarà pari alla metà (50%) della riga (il contenuto verrà posizionato quindi all’interno del primo dei due blocchi presenti in figura). Se poi volessimo, anche in questo caso, fare in modo che il nostro blocco di contenuti occupi, in larghezza, l’intera riga dovremo allo specificare che la sua occupazione non è più di una ma bensì di due colonne

• la terza riga in tre colonne.

In questo caso per fare in modo che il nostro contenuto occupi, in larghezza, l’intera riga, dovremo assegnargli una dimensione di 3 colonne. Assegnandogli invece una dimensione di 2 colonne, lo spazio ad esso riservato sarà pari a quello individuato dai primi due blocchi presenti in figura.

Strutturare un layout a griglia significa quindi dare priorità ad elementi come l’ordine, la razionalità e la proporzione tra i vari elementi. Fondamentale, in questo senso, risulta la fase di progettazione che precede la scrittura del codice e l’effettiva implementazione del sito. Ad un livello basilare e molto semplificato, sarà sufficiente approntare un bozzetto del layout che stabilisca misure e proporzioni di quelli che sono i due componenti fondamentali di una griglia: le colonne e lo spazio interno, ovvero quello che separa una colonna dall’altra (il gutter).

Tipicamente, in un layout a griglia le colonne potranno assumere una larghezza variabile (pur rispondendo a precise regole di proporzionalità), mentre lo spazio interno sarà fisso.

Sempre semplificando, sono tre le operazioni di base da compiere nella fase di progettazione:

• definire la larghezza complessiva del layout
• impostare lo spazio che separa le colonne
• stabilire il numero di colonne che ci servono

Ora, se nel definire questi elementi si dovessero utilizzare delle dimensioni in pixel, quello che otterremmo sarebbe pur sempre un sistema a griglia in cui però la griglia stessa avrà delle dimensioni fisse.

Nell’ottica di realizzare un sito responsivo dovremmo invece poter disporre di una griglia fluida in grado di adattarsi alle diverse dimensioni dell’area di visualizzazione del documento (viewport). Per far questo dovremo quindi, ancora una volta, da una parte utilizzare dimensioni percentuali e dall’altra ricorre all’utilizzo delle media query in maniera tale da poter variare il numero di colonne occupate da un certo blocco di contenuti in relazione alle effettive dimensioni della pagina web.

In altri termini dunque mentre su schermi di grandi dimensioni due distinti blocchi di contenuti potrebbero, ad esempio, occupare ciascuno 2 delle 4 colonne in cui avevamo pensato di suddividere una riga, disponendosi quindi uno a fianco dell’altro, su schermi di piccole dimensioni questi stessi blocchi di contenuti dovranno occupare ciascuno 4 colonne in maniera tale da assumere una larghezza pari al 100%, linearizzare il layout e disporsi uno sotto l’altro.

Dal punto di vista tecnico, sarà necessario, per prima cosa, strutturare il markup HTML della pagina in maniera tale da implementare il layout a griglia pensato in fase di progettazione.

Facendo sempre riferimento alla griglia rappresentata nella figura precedente potremmo quindi utilizzare un markup di questo tipo:

<div class="riga">

<div class="colonna-1">

[...]

</div>

</div>

<div class="riga">

<div class="colonna-1-2">

[...]

</div>

<div class="colonna-1-2">

[...]

</div>

</div>

<div class="riga">

<div class="colonna-1-3">

[...]

</div>

<div class="colonna-1-3">

[...]

</div>

<div class="colonna-1-3">

[...]

</div>

</div>

<div class="riga">

<div class="colonna-1">

[...]

</div>

</div>

I blocchi orizzontali sono racchiusi in un div con classe .riga. Ciascuna colonna all’interno di una riga è impostata con una classe che fa riferimento al suo rapporto in larghezza rispetto alla larghezza complessiva;

• .colonna-1-3 significa “colonna pari a 1/3 della larghezza complessiva della riga” (33.33%);
• .colonna-1-2 significa “colonna pari alla metà (1/2) della larghezza complessiva” (50%);
• .colonna-1 è la colonna che occupa l’intera larghezza (100%), la nostra unità di base.

Definito il markup HTML dovremo poi passare alla definizione del foglio di stile in maniera tale da rendere la griglia completamente funzionante. Nel definire le regole CSS dovremo fare in modo, ad esempio, che le varie righe occupino, in larghezza, l’intera area di visualizzazione del documento. Potremmo quindi impostare la classe .riga in questo modo

.riga {

width: 100%;

margin: 0 auto;

}

Considerando poi che la prima e la quarta riga della griglia sono state pensate per contenere una sola colonna allora anche il contenitore all’interno del quale andranno inseriti i contenuti della prima riga dovrà avere una larghezza del 100%.

.colonna-1{

width: 100%;

}

La seconda riga della griglia dovrà invece contenere due colonne per cui i contenitori all’interno dei quali inserire i contenuti da posizionare in questa riga dovranno avere questa volta una larghezza del 50%

.colonna-1-2 {

width: 50%;

}

In realtà impostando una width del 50% come sopra evidenziato, le due colonne saranno perfettamente attaccate e lo spazio tra di esse (il gutter) sarà nullo.

Se volessimo aggiungere dello spazio, tramite margini o (più correttamente) padding, dovremo di contro ridurre la larghezza dei due blocchi di contenuti per consentire di allinearli comunque sulla stessa riga. Considerando però che la larghezza dei due blocchi di contenuti deve essere in percentuale mentre lo spazio di separazione tra di essi dovrebbe essere fissato in pixel, riuscire a gestire il tutto mantenendo i due blocchi allineati potrebbe risultare difficile e anche un solo pixel in più potrebbe distruggere il layout.

Per risolvere questo problema e impostare un gutter fisso tra le due colonne, mantenendo comunque la loro larghezza in percentuale ( come del resto pensato in fase di progettazione ) dovremo inserire un altro paio di regole CSS

* {

box-sizing: border-box;

}

[class*='colonna-'] {

padding: 0 20px;

}

Cerchiamo di spiegarne meglio il significato.

Nella prima delle due regole sopra evidenziate il selettore universale * consente di applicare la relativa regola a tutti gli elementi della pagina.

La proprietà box-sizing impostata sul valore border-box consente invece di gestire un box model più logico e naturale. In questo modo infatti le dimensioni assegnate ad un elemento saranno comprensive anche dei padding e del bordo.

Al contrario se per la proprietà box-sizing si utilizzasse il valore di default (content-box) come da specifiche del CSS 2.1, la dimensione indicata per un elemento andrebbe considerata escludendo padding e bordi.

In altri termini dunque se per un dato elemento utilizzassimo le seguenti proprietà

box-sizing: content-box;

width: 200px;

padding: 20px;

dovremmo poi assumere che la larghezza reale dell’elemento sia di 20px+200px+20px=240px.

Utilizzando invece

box-sizing: border-box;

width: 200px;

padding: 20px;

la larghezza complessiva dell’elemento sarà sempre di 200px e questo includerà anche i 40px complessivi dei bordi.

Ora è ovvio che a livello visuale, quello che si può ottenere usando border-box non è diverso da quello che si otterrebbe usando, con valori e misure diversi, content-box.

Ci sono però casi in cui i vantaggi sono evidenti in termini di approccio alla realizzazione di layout soprattutto nel gestire layout fluidi e misure percentuali.

Nel caso in questione infatti utilizzando content-box e fissando la larghezza dei due blocchi di contenuto presenti sulla seconda riga al 50%, basterebbe poi aggiungere anche un solo pixel di padding necessario per impostare lo spazio di separazione tra le due colonne, per fare in modo che la larghezza complessiva degli elementi presenti sulla riga superi il 100% e che quindi il secondo blocco di contenuti vada a disporsi sotto il primo.

Utilizzando invece border-box, il valore del 50% impostato per la larghezza dei due blocchi di contenuto, sarà quello complessivo compresi anche eventuali padding che a questo punto potranno quindi essere utilizzati per gestire lo spazio di separazione tra le due colonne.

Con la seconda delle due regole precedentemente analizzate viene fatta proprio questa operazione: con il selettore di attributo [class*='colonna-'] selezioniamo tutti gli elementi che hanno una classe che nel nome comprende la stringa “colonna-”, per essi andiamo poi ad impostare un padding destro e sinistro di 20px creando quindi uno spazio di separazione tra le due colonne pari a 40px

La terza riga della griglia, è stata infine pensata per contenere tre distinte colonne opportunamente spaziate. Come già fatto per le righe della seconda colonna dovremo quindi considerare le seguenti regole CSS

.colonna-1-3 {

width: 33.33%;

}

Le due regole CSS precedentemente analizzate e relative al box-sizing e al padding garantiscono anche in questo caso una separazione tra i tre blocchi di contenuti di 40px.

Le regole CSS appena considerate sono sicuramente di fondamentale importanza per comprendere i principi di funzionamento della griglia ma, ovviamente, non sono le uniche da considerare. Per rendere la griglia completamente funzionante vanno infatti impostate anche altre regole altrettanto importanti: la larghezza complessiva della griglia andrebbe comunque limitata sia come larghezza massima (max-width) sia come larghezza minima (min-width), va gestito correttamente il posizionamento (float, margin, clear ecc…) dei vari elementi ecc…

Inoltre per rendere la griglia responsiva a tutti gli effetti, come sappiamo, non è sufficiente utilizzare delle dimensioni in percentuale ma vanno comunque scritte apposite media query che ci consentano, quando necessario, di linearizzare correttamente il layout.

In questo senso potremmo quindi pensare di assegnare ai contenitori dei blocchi di contenuti presenti nella seconda e nella terza riga un ulteriore classe .colonna-small-1

<div class="riga">

<div class="colonna-1">

[...]

</div>

</div>

<div class="riga">

<div class="colonna-1-2 colonna-small-1">

[...]

</div>

<div class="colonna-1-2 colonna-small-1">

[...]

</div>

</div>

<div class="riga">

<div class="colonna-1-3 colonna-small-1">

[...]

</div>

<div class="colonna-1-3 colonna-small-1">

[...]

</div>

<div class="colonna-1-3 colonna-small-1">

[...]

</div>

</div>

<div class="riga">

<div class="colonna-1">

[...]

</div>

</div>

Questa nuova classe verrà utilizzata per sovrascrivere la regola con cui avevamo precedentemente fissato la larghezza di questi blocchi di contenuti e dovrà quindi essere applicata attraverso un’apposita media query ad esempio solo nel caso in cui l’area di visualizzazione del documento (viewport) sia inferiore ai 400px

@media only screen and (max-width:400px) {

.colonna-small-1{

width: 100%;

}

}

In queste condizioni dunque su schermi di piccole dimensioni riusciremo a linearizzare correttamente il nostro layout.

Detto ora che in Passweb una griglia fluida e responsiva del tipo di quella analizzata fino a questo momento può essere realizzata da zero utilizzando tanti componenti Contenitore opportunamente annidati, fissando le varie regole CSS e le media query necessarie mediante lo Style Editor di Passweb e le apposite sezione dei layout di Pagina e/o di sito, l’obbiettivo di questa guida non è comunque quello di spiegare nei dettagli questo procedimento.

Fortunatamente, infatti, sebbene possibile, non è comunque strettamente necessario costruirsi da zero una griglia responsiva, ma possono tranquillamente essere utilizzati dei framework responsivi che si rifanno esattamente agli stessi concetti di base fino ad ora analizzati mettendo però già a nostra disposizione tutte le classi CSS e le media query necessarie per costruire una griglia completamente e perfettamente funzionante.

Grazie a questi framework sarà quindi possibile implementare in Passweb una griglia responsiva utilizzando componenti Contenitori annidati e assegnando loro, in fasi di configurazione, le corrette classi previste dallo specifico framework che si è deciso di utilizzare.

Nei successivi capitoli di questa guida vedremo un po’ più nel dettaglio come utilizzare il framework uikit.css per implementare, tra le altre cose, nel nostro sito Passweb una griglia responsiva.