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

**URL:** <https://community.weweb.io/t/how-to-create-a-dynamic-masonry-grid-or-packing-grid/7144>\
**Category:** Ask us anything\
**Created:** [February 20, 2024, 8:22pm UTC](https://community.weweb.io/t/how-to-create-a-dynamic-masonry-grid-or-packing-grid/7144 "2024-02-20T20:22:13Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![IKR](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/ikr/32/8200_2.png) [@IKR](https://community.weweb.io/u/IKR)\
**Post date:** [February 20, 2024, 8:22pm UTC](https://community.weweb.io/t/how-to-create-a-dynamic-masonry-grid-or-packing-grid/7144/1 "2024-02-20T20:22:14Z")

</div>

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](https://www.npmjs.com/package/@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 🙂 .  
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](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/4/43d65884541b19ce1869f740e029515c087c325b.png)  
 ![PackingGrid](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/7/7ae91c212b1e995b310589fba1b4374a9ebb7f02.png)

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](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/e/e7487cdfaf8d339514bdf9012469caa2228b804f.jpeg)

Thanks in advance.

---

<div class="post-metadata">

**Author:** ![IKR](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/ikr/32/8200_2.png) [@IKR](https://community.weweb.io/u/IKR)\
**Post date:** [February 20, 2024, 10:06pm UTC](https://community.weweb.io/t/how-to-create-a-dynamic-masonry-grid-or-packing-grid/7144/2 "2024-02-20T22:06:59Z")

</div>

This “fr” unit sounds good.  
[Dev Mozilla](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout/Masonry_layout)

I can do that with WeWeb?

---

<div class="post-metadata">

**Author:** ![IKR](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/ikr/32/8200_2.png) [@IKR](https://community.weweb.io/u/IKR)\
**Post date:** [February 21, 2024, 7:47pm UTC](https://community.weweb.io/t/how-to-create-a-dynamic-masonry-grid-or-packing-grid/7144/3 "2024-02-21T19:47:39Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![luka](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/luka/32/1571_2.png) [@luka](https://community.weweb.io/u/luka)\
**Post date:** [February 22, 2024, 9:21am UTC](https://community.weweb.io/t/how-to-create-a-dynamic-masonry-grid-or-packing-grid/7144/4 "2024-02-22T09:21:04Z")

</div>

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](https://community.weweb.io/t/masonry-grid-layout/2314), I might make an example and a template when I have the time and share with you