Creating a Masonry Layout in Webflow: A Step-By-Step Guide


Web design is all about staying on top of the latest trends, and one that's been making waves is the masonry layout. If you're looking to add some visual flair to your website, a masonry layout is the way to go. It's a grid-like structure that gives you the flexibility to play around with different column widths and heights. In this blog post, we'll walk you through the simple steps to build a masonry layout in Webflow. Get ready to unleash your creativity and make your website shine!

Step 1: Setting Up the Structure

First things first, let's plan where you want to add your masonry layout. Look for the perfect spot on your webpage and designate a container element for it. For our example, we'll call it "Testimonial-wrap." Keep this in mind as we move forward.

Step 2: CSS Styling

Now comes the fun part—adding some custom CSS code. Don't worry, it's not as complicated as it sounds! To get started, open up the code editor in Webflow and add the following CSS code within the head section:

	columns: 3;
	break-inside: avoid;

Here's the deal: the `.testimonial-wrap` class is our container element, which we want to display as a regular block element (no flexbox here!). By setting `columns: 3;`, you can determine how many columns you want in your layout. Feel free to experiment and adjust this value until you find your sweet spot.

Now, let's take care of the individual items in your masonry layout. The `.testimonial-item` class is here to save the day! With `break-inside: avoid;`, we make sure that each item aligns from the top, giving your layout that neat and organized look we're after.

Step 3: Preview and Refinement

It's showtime! Hit the preview button and watch your masonry layout come to life. The items within the layout should automatically arrange themselves into columns, creating a visually pleasing and dynamic design. Take a moment to admire your work and make any necessary tweaks.

Step 4: Customization and Fine-tuning

Now that you've got the basics down, it's time to add your personal touch. To make your masonry layout truly yours, feel free to play around with additional CSS properties. Adjust the padding, margins, and even throw in some transitions to make those items pop. Let your creativity run wild and bring your unique style to the forefront!

Final Result:

And there you have it—your very own masonry layout in Webflow! Take a step back and admire the visually stunning and dynamic grid-like structure you've created. It adds an extra level of creativity and sophistication to your website, making it stand out from the crowd.


Creating a masonry layout in Webflow is an exciting way to elevate your web design game. With our simple steps and your imagination, you can effortlessly incorporate this trendy layout into your website. Remember, the key is to have fun and experiment with customization options. So, dive in, unleash your creativity, and let your masonry layout take center stage on your amazing website. 

Get even faster page loads.
Learn More
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Lil Big Things is for marketers and founders who don't have tech for their marketing at hand.
Get A Free Consult
Veer Manhas

Webflow Partner taking care of your technical woes in marketing from Webflow to data tracking 🚀🚀

You Design, We Webflow. We follow our clients vision and provide limitless Webflow development catering to their creative ideation.

Ready to get started?
Get a free consult