Streaming live at 10am (PST)

Staggered CMS items

Hi All,

Was wondering if someone could help me out,

Im trying to create staggered blog posts.

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)

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:

This is pulled from a CMS collection of services.

1 Like

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

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

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 https://www.youtube.com/watch?v=P-kjgkzk2Mk

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

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.
http://collection-testing-fashion-uniforms.webflow.io/masonry-grid-layout

Cheers
Grant

1 Like