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.