Come creare un layout Masonry con CSS3

Ti sei sempre chiesto come impaginare un sito web sul modello di social come Pinterest con quella particolare modalità di gestione delle colonne (anche detto layout Masonry)? Non ti preoccupare, in questo piccolo tutorial ti spiegherò come fare utilizzando solamente le proprietà di CSS3 e senza l’ausilio di nessun plug-in jQuery.

Prima però ci sono un paio di cose che devi sapere.

• Questa tipologia di layout/gallery si chiama appunto Masonry
• Esistono diversi plug-in per ottenere lo stesso risultato
• La proprietà CSS che useremo si chiama column
• Anche se nel tutorial non ci sono sarebbe preferibile utilizzare i prefissi proprietari come webkit e moz nelle dichiarazioni
• Essendo una regola di CSS3 non gode di totale retro compatibilità pertanto sappi che su IE funzionerà solo dalla versione 10

Ora che abbiamo chiarito questi punti cardine ti invito a creare una nuova cartella di lavoro inserendo un file index e un foglio di stile.

Naturalmente non dimenticare di collegarli tra loro.

Come da figura successiva preparati una serie di immagini di prova con dimensioni differenti dopodiché passa pure a compilare il codice HTML

Come puoi vedere abbiamo inserito dentro un contenitore (.wrapper) un div.masonry per la gestione del layout. Inserisci quindi tanti div.item quanti sono i box che vuoi realizzare. Non limitarti alle immagini, faremo in modo che in questo layout tu possa gestire anche iframe (Google maps, video di YouTube o Vimeo, ecc), titoli e paragrafi.

Impostiamo infatti subito questi aspetti nel foglio di stile e, come descritto in figura, prepariamo i parametri di default del nostro contenitore che andremo a forzare nei break points in relazione alle varie risoluzioni.

Di seguito definiamo le impostazioni generali del div masonry, dove utilizziamo la proprietà column-gap per definire uno spazio tra i box che il browser si gestirà da solo, e la formattazione dei div item che, per questo tutorial, avranno uno stile Material Design

E finalmente andiamo ad inserire le nostre media queries con 3 break points standard ovvero 1170px per i desktop, 992px per i tablet e 768px per gli smartphone. Ovviamente nessuno ti vieta di personalizzare a tuo piacere queste definizioni o aggiungerne ulteriori.

Come puoi vedere giochiamo sulle larghezze minime utilizzando la proprietà column-count; in questo modo possiamo definire la seguente distribuzione automatica dei nostri box colonna:

• da 0 a 768px 1 colonna
• da 768 a 992px 2 colonne
• da 992 a 1170px 3 colonne
• da 1170px in poi 4 colonne

Definiamo anche una larghezza massima per il contenitore così che non superi i 1170px di larghezza; in questo modo eviterai di avere una visualizzazione fullsize ma bensì boxed nei monitor di grandi dimensioni.

Ti è sembrato troppo facile? Prova tu stesso, lancia l’anteprima del tuo browser preferito e vedrai i tuoi contenuti distribuirsi, senza l’ausilio di nessun float o le magie di Flexbox, in 4 colonne sul desktop

3 colonne nei tablet landscape o nei laptop

2 colonne nei tablet portrait o in smartphone di grandi dimensioni

e 1 colonna in tutti gli altri dispositivi mobile

Soddisfatto?