Layout in stile “Masonry Grid” usando la proprietà css-column.

Il layout in stile “Masonry” è molto popolare nel web, in quanto una delle più versatili soluzioni per la visualizzazione di card ad altezza variabile.

La libreria che da il nome al layout, “Masonry Grid”, è stata rimpiazzata dalle proprietà native di CSS3.

Ho realizzato un semplice prototipo utilizzando la proprietà columns-*.

column-count: 5;
column-gap: 5px;

TIP: Utilizzando le media-query CSS, e modificando la colum-count in base alle risoluzioni dei vari dispositivi, si puo ottenere un ottimo risultato responsive.

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *