How to create a Masonry Layout using Flexbox in Webflow?

TL;DR
  • Set a container to Flex display, align items to top, and configure flex direction to vertical with wrap enabled for staggered appearance.
  • Add divs as child elements with varying heights, adjust flex settings for responsiveness, and style each item as needed.

Creating a Masonry Layout using Flexbox in Webflow involves using the flex properties creatively to align items in a staggered pattern. Follow these steps to get started:

​

1. Set Up Your Container

  • Add a Wrapper Div: Add a div block to your page to serve as the container for your grid.
  • Set Display to Flex: Go to the Style panel and set the display of this container to Flex.
  • Align Items Top: Ensure that the Align Items property is set to Start to keep elements aligned to the top.

​

2. Configure Flexbox Settings

  • Direction: Set the Flex Direction to Vertical for a default column flow.
  • Wrap Children: Enable Wrap so that items can move to a new line as needed.
  • Justify Content: Set to Space Between or Space Around to create an even spacing effect.

​

3. Add Child Elements

  • Add Divs Inside the Container: Place several div blocks inside the flex container. These will serve as the individual masonry items.
  • Vary Sizes: Change the height of each child div to vary, mimicking the staggering seen in a traditional masonry layout.

​

4. Adjust Responsive Design

  • Use Media Queries: Adjust the flexbox settings under Webflow's Responsive Tabs to ensure the layout adapts well across different screen sizes.
  • Stack Vertically on Mobile: You might want to switch flex direction to vertical on smaller screens for a cleaner look.

​

5. Customize Design

  • Style Each Item: Add background colors, images, or other styles to your child divs as desired.
  • Use Margin or Padding: Add space around divs to control the gap between items and enhance the overall design.

​

Summary

To create a Masonry Layout using Flexbox in Webflow, set up a container with flex properties, vary the sizes of child items inside it, and adjust responsive behavior for various screen sizes. This method leverages flex wrapping and alignment for a similar effect to traditional masonry layouts.

Webflow Resources
Webflow templates
Webflow inspiration
Rate this answer

Other Webflow Questions

Explore Logic tutorials
Why aren't the individual project pages of my furniture business showing up on Google search results, even though I have updated the meta descriptions and titles on my Webflow site?
How can I auto-populate a form field in Webflow with the CMS item name from the same page?
How can I implement a full page lottie animation with Webflow that maintains its aspect ratio regardless of the viewport size? I have already tried using "object-fit: cover" but it didn't solve the issue. I found that I need to use the parameter "rendererSettings:{ preserveAspectRatio:'none' }" in Bodymovin, but I'm not sure how to implement it while still using the Webflow interface for lottie animation. Any suggestions?
Is it possible to instantly redirect my Webflow website built for an app to the App Store or Play Store link if accessed from an iPhone or Android device?
How can I make the hyperlinks in my rich text block within Webflow stick to the same line as the rest of the text, when the text is pulled from the collections editor?
What are some of the best tools and integrations for Webflow?
What alternative approach can I take to resolve the issue with my multi-reference field in Webflow that is causing my Zap to occasionally not work?
How can I properly load the jspdf library in Webflow to resolve the "uncaught referenceerror: jspdf is not defined" error I am encountering when adding a button that downloads the webpage as a PDF?
How can I hide select fields in Webflow based on the user's selected option?
Is it possible to create an infinite scroll carousel like the one in Ran Segall's case study using Webflow?
Is there an easy solution in Webflow for creating a slider element with a bar on the left that changes the content on the right when slid?
How can I create a gallery with multiple images in Webflow and hide the scroll bar using CSS code, such as the mentioned code for body::-webkit-scrollbar?
Can I make at least one checkbox in a group required in Webflow? If users don't select at least one checkbox, can I show an error message?
Does making adjustments to content in the CMS change the original publishing date in Webflow?
How can I play an embedded Vimeo video when it becomes visible in the viewport using a plugin in Webflow?
Can I capture a screenshot of a Webflow page on click and convert it to a downloadable PDF?
How can I alternate the layout of the image and heading for each collection item in a two-column format on Webflow?
How can I execute JavaScript code when clicking a specific button with a given ID in a Webflow project?
How can I disable the Webflow success or failure state for a sign-up form and display a custom thank you page using jQuery and the Webflow form submit state?
How can I create a vertical scrolling menu with Webflow, similar to the one on Apple's website, that switches to horizontal scrolling when the menu doesn't fit on one screen?
How can I change the language of the Google Maps embed from English to Arabic in Webflow?
How can I reduce the vertical space between lines within a bullet point in Webflow? Can I replace the bullet points with icons on the "Services" page?
How can the text color be changed for custom input fields on Webflow?
How can I add conditional visibility in Webflow to prevent a div from appearing on a published page if a CMS field is empty?
How can I stop a YouTube video from playing in the background in audio mode when I close a modal in Webflow?
How can I connect and use my JavaScript and CSS files for special functions and styles in Webflow?
How can I fix the "Ensure text remains visible during webfont load" warning in Webflow?
How can I implement a ThreeJS script as a background for my Webflow project using custom code?
How can I send data from a Webflow Form to ActiveCampaign without using Zapier? I have set the form to POST and input the form's action URL, similar to Mailchimp but it redirects me to the admin area of ActiveCampaign without sending the data. Has anyone had success with this method?
Can Webflow be used to create a "blob" elements effect in the header of a website using custom code or JavaScript?