Webflow

Masonry layout on Webflow collection pages

How to create a Pinterest style masonry layout in Webflow Collection pages.

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. This tutorial uses the Masonry Webflow Tool built by Refokus. You can see their tutorial here.

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.

Default card inside of a parent element.

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

How cards of different shapes will show by default. Notice the gaps.

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.

How cards are rendered using CSS columns

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

Desired Masonry Layout

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.

Masonry layout on Webflow collection pages

More tutorials

Workflows Part 2: Transform your simple form into a powerful workflow

15 documents you can automate without code

Add syntax highlighting to Webflow CMS

Take your 404 page to the next level