Horizontal Masonry Grid like the Pros (Unsplash and Pinterest)

Horizontal masonry grids can be tricky to implement, especially when we want to ensure that we preserve item ordering in a left-to-right row-based fashion. Most tutorials show how to build masonry grids with a vertical column-based approach, but we can use a great lightweight javascript library called macy.js to achieve the desired effect. With this technique, we will ensure that our masonry grid displays items row by row such that we can sort showing newest items on top, or however we specify (alphabetical, by category, etc.)

Watch the Tutorial on YouTubeGet the Project Cloneable

Inside <head> tag

<script defer src="https://cdn.jsdelivr.net/npm/macy@2"></script>

Inside </body> tag

document.addEventListener('DOMContentLoaded', () => {
  let macyInstance = Macy({
    container: "#masonry",
    margin: 16,
    columns: 4,
    breakAt: {
      991: 3,
      767: 2,
      479: 1
    }
  });

  const items = document.querySelectorAll(".item");
  for (let item of items) {
    item.classList.remove("is-loading");
  }
})