Masonry, creare grid layout responsive

18 novembre 2014

Una buona parte dei siti Web moderni, progettati per essere visibili su schermi con dimensioni e risoluzioni eterogenee, adottano un cosiddetto layout a griglia. Si tratta di una soluzione presente in molteplici framework, ad esempio Twitter Bootstrap, laddove è presente una componente di fogli di stile CSS.

I layout a griglia

Il funzionamento è semplice: si immagina di suddividere la pagina in un numero fisso di colonne (es. 12) e, attraverso apposite classi applicabili agli elementi HTML (tipicamente dei <div>), si stabilisce quante colonne l’elemento (tipicamente un riquadro) occupa nella riga in cui giace, riproducendo qualcosa di simile al layout di una tabella <table> in cui si dispongono invece i contenuti su celle, ricorrendo all’attributo colspan per estenderle a più colonne sulla stessa riga. Ecco un esempio di markup che definisce un layout strutturato a griglia:

<div class="row">
  <div class="col-8">
      <div class="row">
        <div class="col-3">
          ...
        </div>
        <div class="col-6">
          ...
        </div>
        <div class="col-3">
          ...
        </div>
      </div>
  </div>
  <div class="col-4">
      ...
  </div>
</div>

Poiché questa soluzione non si basa su effettive tabelle HTML, offre il vantaggio di risultare estremamente flessibile:

  • possiamo nidificare le griglie a patto che la somma dello spazio occupato delle colonne sia sempre lo stesso;
  • inoltre, quasi tutti i framework per “grid layout” forniscono classi addizionali che permettono di stabilire come le celle della “griglia virtuale” debbano apparire quando le dimensioni dello schermo si riducono, ad esempio su smartphone e tablet.

In questo modo le informazioni possono apparire l’una sotto l’altra in base all’ordine indicato, o scomparire se non rilevanti su alcuni dispositivi, aderendo quindi agli standard del Responsive Design.

L’approccio in stile “muratura”

Il layout a griglia è una soluzione adatta alla maggior parte delle esigenze di strutturazione generale di un sito Web, ma può avere delle limitazioni, in particolare quando la pagina Web deve raffigurare in modo ottimale elementi che hanno dimensioni eterogenee, ad esempio le immagini che compongono un album fotografico, con diversi orientamenti (orizzontale e verticale) e diverse grandezze.

Quando si presentano questi scenari, può essere utile adottare un framework differente, in grado di disporre gli elementi affinché venga occupata l’area disponibile nella pagina lasciando la minor quantità possibile di spazio vuoto, in modo del tutto simile a quanto avviene con le tecniche di muratura impiegate nell’edilizia.

La libreria “Masonry”

Masonry è una libreria JavaScript, scaricabile dal sito ufficiale, che implementa un layout a griglia flessibile in grado di disporre gli elementi in una posizione ottimale in base allo spazio disponibile in verticale, incastrandoli in modo simile alla muratura rappresentata nella foto.

Per esemplificare ulteriormente il concetto, il diagramma rappresentato di seguito mostra come viene trasformato il layout di una pagina esistente (basato sull’uso di comuni “float” o su grid framework tradizionali) utilizzando la libreria Masonry:

Vediamo nel dettaglio come si usa la libreria per disporre i contenuti della pagina utilizzando questo particolare tipo di layout di sicuro impatto visivo.

Potete scaricare un file ZIP contenente tutti gli esempi trattati in questo articolo.

Importare la libreria

Il primo passo per utilizzare la libreria è scaricare il file che contiene il codice JavaScript, disponibile nella versione originale (estesa, leggibile e documentata) o nella versione minified (compressa e ottimizzata per l’uso in ambiente di produzione).

Occorre poi importare lo script nella pagina HTML nel modo convenzionale:

<script src="js/masonry.pkgd.min.js"></script>

Se vuoi aggiornamenti su Masonry, creare grid layout responsive inserisci la tua e-mail nel box qui sotto:
 
X
Se vuoi aggiornamenti su Masonry, creare grid layout responsive

inserisci la tua e-mail nel box qui sotto:

Ho letto e acconsento l'informativa sulla privacy

Acconsento al trattamento di cui al punto 3 dell'informativa sulla privacy