CMS Masonry (Macy.JS) issue with Finsweet Combine

Hi, I’m having an issue with a masonry grid when using Finsweet combine.

I have the functionality of macy.js and the CMS combine working okay, however there is a huge gap on the page that shouldn’t be there. This gap goes away when the page is resized.

I’ve filmed a quick loom showing what I mean: https://www.loom.com/share/e6a32fa89c9543e190969a79b8867c2a?sid=65f459dd-8b11-4390-9f1f-902e094ff134

Also here is the webflow link: https://alroe-constructions.webflow.io/portfolio

Can someone please help me with this?

Hey @caleb1! Apologies for the delay, I see you have written some custom code, however, I believe it could be simplified for easier maintenance.

<script>
  window.fsAttributes = window.fsAttributes || [];
  window.fsAttributes.push([
    'cmsfilter',
    (filterInstances) => {
      console.log('cmsfilter Successfully loaded!');

      const [filterInstance] = filterInstances;
      const { listInstance } = filterInstance;

      macyInstance = Macy({
        container: '#masonry',
        margin: 16,
        columns: 3,
        waitForImages: true,
        breakAt: {
          991: 2,
          767: 2,
          479: 1,
        },
      });

      listInstance.on('renderitems', (renderedItems) => {
        macyInstance.runOnImageLoad(function () {
          macyInstance.recalculate(true);
        }, true);
      });
    },
  ]);
</script>

This should keep the masonry layout properly styled after filtering, window resizing, and such.