Masonry Layout in Webflow (masonry.js)

Image Gallery

Jonatan Pie

Jonatan Pie

1
Jennifer Pall

Jennifer Pall

2
Josh Post

Josh Post

3
Leio Oshima

Leio Oshima

4
Tim Trad

Tim Trad

5
Benjamin Voros

Benjamin Voros

6
Nathan McBride

Nathan McBride

7
Aziz Acharki

Aziz Acharki

8
Pawel Nolbert

Pawel Nolbert

9
Adam Birkett

Adam Birkett

10
Ian Dooley

Ian Dooley

11
Garrett Parker

Garrett Parker

12

More photos on unsplash.com

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!