‍

Whether you're building an entire portfolio or just a section of your site, a masonry, or pinterest-style, grid is a great way to display image heavy content. With a staggered grid like this, it allows the users eye to move around the page, consuming all the content in a more visually interesting way than just your standard rows and columns layout.

One thing to keep in mind with this style of layout, is that you need to input images into the grid that have varying heights. If not, your images will line up evenly and you won't achieved the staggered effect that we're going for.

The original concept for this layout comes from sabanna over on the Webflow Community Forum.

Essentially, it involves turning a div block into columns using the Text Columns feature.

How to Create the Grid

1. Add a Container blockto a Section
2. Inside that Container Add a Div and give that div a class called Columns (or whatever you'd like)
3. With the Columns div selected, go to your Style panel and under Typography > Advanced Type Options and type the number of columns you want in the Columns Box. This will magically turn the Columns div into a 3 column block.
4. Add a Link Block to the Columns div and name the Link Block Thumbnail (or whatever you'd want)
5. Add an Image block inside the Link Block
6. Copy + Paste the Link Block as many times as you need

Now that you have the grid created you can add margin to the Thumbnail class to separate the images and change the Gap of the Text Columns using the ellipsis icon that's next to the column number in the Style > Typography > Advanced Type Options.

For a full-width grid, just move the Columns grid outside the Container div. Make sure to give the Columns div margin from the previous instructions.