# CMS Masonry grid & Finsweet Combine + Sort

**URL:** https://forum.finsweet.com/t/cms-masonry-grid-finsweet-combine-sort/3097
**Category:** Attributes
**Tags:** cmssort, cmscombine
**Created:** [July 6, 2024, 8:39am UTC](https://forum.finsweet.com/t/cms-masonry-grid-finsweet-combine-sort/3097 "2024-07-06T08:39:40Z")
**Posts on this page:** 10
**Page:** 1

<div class="post-metadata">

### Author: ![christopher](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/christopher/32/1216_2.png) [@christopher](https://forum.finsweet.com/u/christopher)
#### Post date: [July 6, 2024, 8:39am UTC](https://forum.finsweet.com/t/cms-masonry-grid-finsweet-combine-sort/3097/1 "2024-07-06T08:39:40Z")

</div>

Hi.

I want to create a Masonry (pinterest) style grid. Where the cards have different height and the row height is not defined by the tallest card, but there is even margin between them.

I also need to combine two cms for this - I just Finsweet combine + sort to make this happen.

I then tried to add Macy.js, but couldn’t get it to work when using Finsweet Sort+combine (only without it).

Any tips on this issue? \*

Thanks!

---

<div class="post-metadata">

### Author: ![Support-Luis](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/support-luis/32/53_2.png) [@Support-Luis](https://forum.finsweet.com/u/Support-Luis)
#### Post date: [July 8, 2024, 10:14am UTC](https://forum.finsweet.com/t/cms-masonry-grid-finsweet-combine-sort/3097/2 "2024-07-08T10:14:16Z")

</div>

Hey @christopher! Are you going to filter the list later on? Or just display it with?

If you could share a link I will work on the code needed to make this setup work! 💪

---

<div class="post-metadata">

### Author: ![christopher](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/christopher/32/1216_2.png) [@christopher](https://forum.finsweet.com/u/christopher)
#### Post date: [July 8, 2024, 4:03pm UTC](https://forum.finsweet.com/t/cms-masonry-grid-finsweet-combine-sort/3097/3 "2024-07-08T16:03:21Z")

</div>

That’s awesome @Support-Luis Thank you!

The link are [https://vi-klinikken.webflow.io/](https://vi-klinikken.webflow.io/)

I am not filtering the list later on.  
I am sorting using number.

It’s the section called “section\_home-fagpersoner”

Right now I have the first CMS list " This is a Webflow component. Paste it into Webflow. Syncing powered by the Relume Chrome Extension." with CSS flex and wrapped down.

All the best.  
Chris

---

<div class="post-metadata">

### Author: ![Support-Luis](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/support-luis/32/53_2.png) [@Support-Luis](https://forum.finsweet.com/u/Support-Luis)
#### Post date: [July 8, 2024, 6:06pm UTC](https://forum.finsweet.com/t/cms-masonry-grid-finsweet-combine-sort/3097/4 "2024-07-08T18:06:53Z")

</div>

Hey @christopher! Could you actually help me with your Macy.js config?  
You can set the list styling to your linking, I will add the extra code needed to make it work with Attributes 😉

---

<div class="post-metadata">

### Author: ![christopher](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/christopher/32/1216_2.png) [@christopher](https://forum.finsweet.com/u/christopher)
#### Post date: [July 9, 2024, 10:49am UTC](https://forum.finsweet.com/t/cms-masonry-grid-finsweet-combine-sort/3097/5 "2024-07-09T10:49:21Z")

</div>

I couldn’t get Macy to work so I used [How to add Masonry Layout in Webflow?](https://www.webflow-tools.refokus.com/tools/masonry-layout) instead. That is now published on the site @Support-Luis

---

<div class="post-metadata">

### Author: ![Support-Luis](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/support-luis/32/53_2.png) [@Support-Luis](https://forum.finsweet.com/u/Support-Luis)
#### Post date: [July 9, 2024, 3:03pm UTC](https://forum.finsweet.com/t/cms-masonry-grid-finsweet-combine-sort/3097/6 "2024-07-09T15:03:21Z")

</div>

Hey @christopher, the issue with Refokus is that we do not have access to a refresh or init function as we do with Macy.

I would advise you to try to get the setup working with Macy, you can remove all Attributes setup until the masonry is set as you intend.

We will get it working 💪

---

<div class="post-metadata">

### Author: ![christopher](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/christopher/32/1216_2.png) [@christopher](https://forum.finsweet.com/u/christopher)
#### Post date: [July 10, 2024, 9:04am UTC](https://forum.finsweet.com/t/cms-masonry-grid-finsweet-combine-sort/3097/7 "2024-07-10T09:04:16Z")

</div>

I see @Support-Luis

Macy is now in and working, but I need to resize the window for it to work (is this due to Finsweet attributes?)

Thanks!

---

<div class="post-metadata">

### Author: ![Support-Luis](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/support-luis/32/53_2.png) [@Support-Luis](https://forum.finsweet.com/u/Support-Luis)
#### Post date: [July 10, 2024, 12:03pm UTC](https://forum.finsweet.com/t/cms-masonry-grid-finsweet-combine-sort/3097/8 "2024-07-10T12:03:16Z")

</div>

hey @christopher! Don’t worry it must have been because of how the items were being loaded combined and sorted after the Masonry styling was applied.

We can fix this by using the API callback to apply the styling after the list is combined and sorted.

I’ve also added the sort trigger click into this callback to ensure we click the button when the collections are combined, please add the following code to the `</body>` section of your page.

```html
    <script>
      window.fsAttributes = window.fsAttributes || [];
      window.fsAttributes.push([
        'cmscombine',
        (listInstances) => {
          console.log('cmscombine Successfully loaded!');
          document.querySelector('.masonry-combine-sort_button').click();

          let macyInstance = Macy({
            container: '#masonry',
            margin: 16,
            columns: 3,
            breakAt: {
              991: 2,
              767: 2,
              479: 1,
            },
          });
        },
      ]);
    </script>

```

---

<div class="post-metadata">

### Author: ![christopher](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/christopher/32/1216_2.png) [@christopher](https://forum.finsweet.com/u/christopher)
#### Post date: [July 13, 2024, 9:41am UTC](https://forum.finsweet.com/t/cms-masonry-grid-finsweet-combine-sort/3097/9 "2024-07-13T09:41:15Z")

</div>

Thanks @Support-Luis !

I added this, but I still have the same problem.  
Is it the same for you?

Added a loom here [VI-klinikken - Din digitale samtaleklinikk - 13 July 2024 | Loom](https://www.loom.com/share/ef636c75857244f8ac65e292d598aca4?sid=a4e6ea3a-7e7d-48f7-9df8-e63cb832c24c)

Chris

---

<div class="post-metadata">

### Author: ![Support-Luis](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/support-luis/32/53_2.png) [@Support-Luis](https://forum.finsweet.com/u/Support-Luis)
#### Post date: [July 15, 2024, 10:13am UTC](https://forum.finsweet.com/t/cms-masonry-grid-finsweet-combine-sort/3097/10 "2024-07-15T10:13:18Z")

</div>

hey @christopher! Yes, I can also replicate on my end.

I notice the collection items have some top position values once the styling is applied but get removed when the window resizes.

I am trying to see if this comes from Macy or your setup. Could you share a read-only link?