How to create a dynamic "Masonry Grid" or "Packing Grid"?

Ask us anything
1

Hi,

i want to build a grid as mentioned in the topic, basically both are good for my needs and doesn’t really matter which one.

I was trying to use the NPM (@egjs/vue-grid), but with not that much success. Even not sure how to use it, i guess i will need custom component access for that or, yeah i dont know :slight_smile: .
If someone who can make it easily and could try if it works, would be great already.

However,
i have saved below the pictures from “@egjs/vue-grid” to show you what i mean.

MasonryGrid
MasonryGrid896×810 1.98 KB

PackingGrid
PackingGrid884×802 1.9 KB

Is there any way to make that with WeWeb, it must be dynamic and “sortable”

At the moment i have something like this, but i would like to adjust, like the listings can as well not have a picture just text etc.

image
image1920×1067 170 KB

Thanks in advance.

2

This “fr” unit sounds good.
Dev Mozilla

I can do that with WeWeb?

3

Thats how it works, not to reply.
But i found it out how to do it.

4

Currently, you can use display: grid in custom CSS, but the support in the editor is coming soon. With that said, in order to make a masonry grid you will still have some work to do using multiple grids

There was another thread about this, I might make an example and a template when I have the time and share with you