Masonry: layout a griglia flessibili in JavaScript

In lingua inglese, il termine Masonry significa “muratura”, ed è lo stile da cui prende spunto l’omonima libreria JavaScript Masonry, che permette di implementare un layout a griglia nel proprio sito Web in cui gli elementi vengono disposti in automatico per ottimizzare lo spazio occupato in verticale all’interno della pagina, allineandoli in modo del tutto simile al processo di costruzione di un muro di mattoni, da cui il nome della libreria.

Come funziona Masonry

E’ possibile pensare al layout come un “float ruotato” dove gli elementi sono affiancati lungo il senso verticale della pagina, quindi dal basso verso l’alto (o viceversa), piuttosto che in senso orizzontale, come avviene normalmente quando si utilizza la proprietà float dei fogli di stile CSS per allineare gli elementi.

La libreria Masonry fornisce altre funzionalità interessanti, come la possibilità di definire lo spazio libero da lasciare tra un elemento e l’altro, o tra due colonne di elementi affiancati; inoltre, è possibile chiedere a Masonry di spostare in automatico gli elementi a fronte di un ridimensionamento della finestra del browser, utilizzando opzionalmente un’animazione di transizione.

L’uso di questo layout è particolarmente indicato nella costruzione di siti Web che devono essere fruiti da dispositivi eterogenei, con schermi aventi dimensioni tutte differenti tra loro, o dove gli elementi mostrati (una galleria di immagini, ad esempio) non hanno tutti la stessa dimensione, per cui l’ottimizzazione dello spazio vuoto consente di ridurre lo scorrimento necessario nella pagina e di presentare i contenuti con un aspetto visualmente più ordinato.

La libreria Masonry supporta inoltre funzionalità avanzate, come la possibilità di definire elementi “fissi”, ossia che non potranno essere spostati durante la composizione del layout ottimale, con il resto degli elementi che si andranno a disporre di conseguenza attorno a quelli fissi.

Approfondisci

Per conoscere tutto ciò che la libreria Masonry può fare per voi, leggete questo articolo pubblicato sul portale HTML.it.