Horizontal Masonry Grid like the Pros (Unsplash and Pinterest)

1. Setting Up Webflow and CMS Structure

• In Webflow, you'll have a CMS collection with images.
• Make sure your collection list element has an ID of masonry since Macy.js needs this to target the grid container.
• Each collection item should have the image wrapped in a div with a class like .item (we’ll reference this later).
• You'll want to sort the items alphabetically if that's important for your layout.

2. Integrating Macy.js into Webflow

• Add the Macy.js library via CDN in the page settings. To do this, go to Page Settings, scroll to the Head or Footer code sections, and add this script link in the Footer:
• <script src="https://cdnjs.cloudflare.com/ajax/libs/macy/2.5.1/macy.min.js"></script>


3. Macy.js Initialization

Now let's write the JavaScript that makes Macy.js create the horizontal masonry grid. Here's the code block you need to add in the Before Body Tag section of the page or your custom JavaScript file:‍

document.addEventListener('DOMContentLoaded', () => {
  // Create a new Macy.js instance
  let macyInstance = Macy({
    container: "#masonry",  // Target the container with ID masonry
    margin: 16,            // Margin between items
    columns: 4,            // Number of columns at desktop breakpoint
    breakAt: {             // Responsive breakpoints
      991: 3,              // 3 columns for tablet
      767: 2,              // 2 columns for mobile landscape
      479: 1               // 1 column for mobile portrait
    }
  });

  // Remove 'is-loading' class after Macy has positioned the items
  const items = document.querySelectorAll(".item");
  for (let item of items) {
    item.classList.remove("is-loading");
  }
});

• ‍The Macy() function initializes the masonry grid.
• margin: 16 sets the spacing between your items.
• The breakAt object handles how many columns to display at various viewport widths (responsive behavior).

4. Adding Loading Effect and Transitions

You want your images to appear with a blur effect while they load, and for everything to snap into place once Macy.js has processed the grid. To achieve this, follow these steps:

• Add the following CSS to Webflow in your Custom Code section (or inside your CSS file):

.item {
  position: relative;
  transition: filter 0.3s ease, top 0.3s ease, left 0.3s ease;
}

.item.is-loading {
  filter: blur(10px);
}

img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Ensures the image fits well within the grid items */
}

• This adds smooth transitions for how the grid elements are positioned and makes sure that images fill the .item containers without distorting.

5. Optimizing the Layout in Webflow’s Designer

To make the layout look more like the final product during design in Webflow (before Macy.js kicks in on the live site):

• Select your Collection List and set its Display to flex with a wrap option, ensuring that items flow correctly.
• Adjust the widths of each collection item based on the number of columns you expect at each breakpoint:
  • Desktop: Set max-width to 25% (since you have 4 columns).
  • Tablet: Set max-width to 33.33% (3 columns).
  • Mobile landscape: Set max-width to 50% (2 columns).
  • Mobile portrait: Set max-width to 100% (1 column).

6. Testing and Final Adjustments

Once all the code is in place:

• Publish your Webflow project.
• Test the masonry layout across different screen sizes to confirm that the breakpoints behave as expected.
• Make sure the blur effect loads smoothly, and when Macy.js finishes, the blur is removed.

7. Extra Tips

• Custom Margins: As shown in your original tutorial, Macy.js allows you to define different X and Y margins for each breakpoint. For example:
• javascriptCopy code
• margin: { x: 20, y: 10 }

• Performance: Consider lazy-loading your images for improved page load times.

That's it! Your horizontal masonry grid is now set up, optimized for different screen sizes, and styled to have a smooth loading effect.

‍