Masonry Layout in Webflow (masonry.js)

How-To

Follow the instructions below to turn your dynamic list collection into a REAL "Masonry-Layout" (Pinterest Layout)

Step 1

Add this Custom Code before </BODY> tag:


<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/4.2.1/masonry.pkgd.min.js"></script>
<script>
  //init masonry grid 
$(window).on("load", function() {
	$('.masonry').masonry({
    itemSelector: '.masonry-item'
  });
});

</script>

Step 2

Add your Collection List, give it a 3-Column-Layout and add the class masonry...

Add a class masonry-item to the collection items

Hit PUBLISH and enjoy a real masonry layout!