Configure the CMS
Prioritizing the configuration of your Content Management System first helps streamline the development of your masonry layout.
When you establish the necessary fields upfront, you’re creating a framework that not only allows you to validate your grid functionality immediately, but also ensures the content structure matches your design requirements and helps you develop your layout with greater efficiency and predictability.
Start by defining the essential fields specific to your masonry layout. If your grid will only feature an image, that’s all you’ll need to configure for now – we’ll work under this assumption.
- Within the CMS, create a New Collection and fill out the basic information.
- Within the Custom Fields section, add an Image field. Depending on how many CMS items you’ll have, it’s sometimes easier to add one or two images as a visual reference.
- I’ve also found at this stage, it’s helpful to create another Custom Field to use for Alt text, using the Plain Text Field. Although optional, I do this so that when I create my masonry layout, I can connect both the image and alt text at the same time – this saves a small amount of time, but most importantly ensures you don’t forget about this field.
- After saving your Collection, return to the page you’d like to create your masonry grid on.
Add a section
We’ll use this to separate the content to be added from anything else on the page. It’s helpful to create a class and give a unique name related to your grid. You can additionally add your section styles for your page such as margin, section padding, max width, and alignment.
Nest a div block within your section
The Div block will be used as a wrapper for your CMS Collection. Create a class and give it a unique name related to your CMS collection.
Insert your CMS collection list
When you insert your Collection List, it will be empty.
- First, configure your Collection list settings and connect the source to your recently created CMS collection.
- From the Add panel, insert an Image block and drag it into your collection list.
- Note: you often get an error that your element can’t be added to your collection. When you add your image, add it within your div block first, and then drag and drop the image into the collection list.
- Click on the image’s gear icon and connect the image to your CMS collection. You can additionally connect the Alt text if you’ve added that to your CMS.
- If done correctly, your image(s) will be pulled from your CMS.
Adjust your grid
- Click on your Collection List within the navigator. This is where we will set the grid layout.
- On the right-hand side of Webflow, scroll past the Typography section until you see Columns. Add the number of columns you’d like. You can additionally adjust spacing within the grid by adjusting the Gap settings and bottom margin.
- Set one image to a width of 100% – you want your image to take up the full width of the grid.
- Making changes to one CMS item will apply the same styling to everything in that collection.
- Make sure you adjust your grid for tablet resolutions and below.
