Masonry Layout in Webflow Collections Pages

This tutorial uses the Masonry Webflow Tool built by Refokus. You can see their tutorial here.

Masonry is a popular way to layout a large collection of cards, images, or other contained data. This layout is most commonly associated with Pinterest.

The Problem

By default, web browsers render your elements from top left to bottom right. This works well for card layouts when your cards are all the same size.

However, when your cards are different sizes, there will be gaps between your rows — which doesn't look quite as nice.

One way to achieve the masonry look using simple CSS is through the "Columns" text setting.

This results in your cards being displayed vertically down each column - moving from left to right. This is important because if you need the cards to be listed with the most recent cards on top, this CSS solution will not work.

As a result, we need to rely on a javascript solution to achieve the masonry layout that achieves what we are looking for.

Steps:

    1.  In the "Before </body> Tag" section of your page settings, paste the following code

    2. Select your Collection List element, navigate to the element settings and create three custom attributes on your Collection List.

• Name: r-masonry-layout
  Value: set this to 1
• Name: r-masonry-column-min
  Value: your desired card width in pixels (e.g. 300)

• Name: r-masonry-gap
  Value: your desired gap between card in pixels (e.g. 15)

    3. Be sure you don't have any widths or margins on your Collection Items.