How to Create a Masonry Gallery Style through a Collection List?

Ask us anything How do I?
1

Hello WeWeb Community! :wave:

I’ve been exploring the dynamic design possibilities within WeWeb and am particularly interested in achieving a masonry grid layout for a collection list. I’m aiming for an aesthetic similar to the Masonry Gallery Block, where elements are organized in an optimal space without strict rows, but rather based on their height and width.

collection_list_in_mansory_style
collection_list_in_mansory_style1920×1471 224 KB

mansory gallery
mansory gallery1400×654 92 KB

Does anyone know if there is a way to set up a collection list that emulates the masonry gallery style within WeWeb? Any pointers or guidance on how to achieve this effect would be incredibly appreciated.

Thank you in advance for your insights and assistance!

2

Hi @moscatelli
I was wondering about that the other day!
Here is a demo.

TL;DR: For a single collection list to be displayed in a masonry grid, I’ve use the minimasonry package from the NPM plugin.

2 Likes
3

For anyone interested, adding a more in-depth video on how to use the NPM method with the MiniMasonry external package :slight_smile:

1 Like