Staggered CMS items

Design help General
1

Hi All,

Was wondering if someone could help me out,

Im trying to create staggered blog posts.

52%20PM
52%20PM604Ă—530 3.61 KB

I would like the blocks to align like in the example image attached.

Thanks!!!

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

2

Hello @anthonymas90

In order to create something like this you’re going to need to separate the items into 2 columns of items and use one collection per column, fist collection is going to show items from 1 to 3 and second collection will show items from 4 to 6. and for the gap at the second column you can use a div block with certain amount of height.

Like this:

image
image2232Ă—1342 267 KB

This is pulled from a CMS collection of services.

1 Like
3

As a concept ( above method is proven), I have been testing “column count” (text settings, but applied to the list) on collection lists for this. So this method means only one collection list for a potential masonry layout.

https://preview.webflow.com/preview/masonry-method-test?utm_medium=preview_link&utm_source=designer&utm_content=masonry-method-test&preview=8c00551fc48a5b84f86776ca1f9bbb4f&mode=preview

The photos collections has a gap div which is set to show only if the gap option is on for that CMS item. Just an idea on how to handle content that is all the same height which would prevent column count doing a masonry thing.

1 Like
4

Hi there,

Your link doesn’t work so I can’t see exactly how you’ve tackled this.
Is it a manual or automatic filtering you’ve come up with? The only way I’ve managed to do this sort of thing was to have a switch element in a collection that the user selects to define which column, left or right, the item appears in.

Grant

5

Oh sorry, I had a clean out of projects and it wasn’t in my forum share folder :expressionless:

Hey I doubt it is the best way to go anyway as it required manual changes to CMS items. Probably stick to multiple collection lists filters to show different items. There is now potential to use CSS grid to help out.

@PixelGeek did this video. Not specifically for masonry, but maybe How to Webflow: Creating unique collection list layouts - Tutorial (2019) - YouTube

I have updated the link above to a new demo out of interest. Images use object fit property as well included in an embed

1 Like
6

Thanks for that!

I ended up finding this discussion on the forum [Beginner Tutorial] Masonry Layout using masonry.js and the solution they offer is pretty good. Fits what I need, here’s how I applied it for anybody else looking at this issue.
Masonry Grid Layout

Cheers
Grant

1 Like