Create a responsive Masonry Layout (Pinterest Style)

cr: Refokus & Lime knight

When you want to create a Pinterest-style layout, it becomes tough because when you make it using a grid, Webflow does this,

To achieve a masonry layout (Pinterest Style) in Webflow, there are 2 ways you go about: Use custom code or tweak it directly in Webflow. Let's look at both ways

Using custom code

Paste the below script in the “Before tag" field in the page settings

Now we’ll add 3 attributes to the div holding the collection list

a. Add <li-powerful>r-masonry-layout="1”<li-powerful> & set value to 1

b. Add <li-powerful>r-masonry-column-min="500”<li-powerful> & set value to 250

c. Add <li-powerful>r-masonry-gap="10”<li-powerful> & set value to 40

Hit publish and test!

Tweak in Webflow

We’ll not be using Flexbox or grid to achieve this. We’ll use text columns

• Leave the collection list as <li-powerful>display: block;<li-powerful>
• Set the number of columns you want (under Typography > More type options)
• Set the collection item to <li-powerful>display: inline-block;<li-powerful> to stop it from cutting the card in half when it reaches the bottom
• Set the horizontal gap using the column-gap property on the collection list (it's in the 3 dots menu next to columns)
• Set the vertical gap with margin-bottom on your collection items

‍

And that's it! You achieved a Pinterest style layout directly on Webflow! Perfect for displaying a image library, blog sections or anything creative that you're thinking of