Streaming live at 10am (PST)

Staggered CMS items

#1

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)

#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:

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.

edit: Quick demo https://preview.webflow.com/preview/test-columns-bb559f?utm_source=test-columns-bb559f&preview=3268a3e7a559669755f4bcfb9ff37cfa

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