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.
