Grid using a collection that spans multiple rows?

Is it possible to create a grid using a collection that will span multiple grid cells?

For example, here’s a photo from slack’s blog:

This whole section is made up of one grid. The left side of the grid has just one row (i.e. the blog post spans two grid cells) while the right side has two blog posts (one in each cell).

I was wondering if this is possible in Webflow without creating two separate grids.

Thanks!

Hi @bugsyb,

This is very much so possible.

It can be done by way of two different methods.

  1. use the areas feature
  2. while using Auto, change direction from rows to columns and for the individual div block set to cover two rows.
  3. you could manually force the item to cover two rows and one column while the other would stay auto.

Here is a little video on the three methods. They all do the same, just depends on how extensive you want to get it and it you want Webflow to control the layout or you manually do it.

Hey Brandon,

This is great, thanks a lot for taking the time to explain this!

So I understand that I can do this sort of thing when working with normal divs. But I haven’t been able to figure out how to do it with CMS (i.e. imagine each of the slack posts is a blog post in a CMS). I’ve tried the ‘areas’ method, and I couldn’t get it to work. Is this possible with CMS, or does it only work with static content?

Thanks again,

Albert

Hi there.

Unfortunately, there isn’t a way to do this in CMS at the moment.

Since it is a dynamic layout and how the content is viewed, NO to answer your question.

Now you could do a worked around on this tho. Make the main feed a Featured look, and then use the smaller ones as additional content or related content.

However, to do it in a single grid, no this is not viable. Areas does not work for Collections.

You could create a grid within a grid tho.

Excellent help! But, can you have a collection in a 3x3 grid, with the latest post spanning 2 columns while the rest take up only 1 as usual?

Hi @Micheal_Beaulieu,

Not with how our CMS collections are built. You can fake it by using two different collections and some sorting and filter to get it to look right, but it may not work exactly the way you want it to.

I have seen some other members here do some pretty amazing things with CMS Collections in a Grid layout. Id recommend doing some research here.

Best Regards,
~ Brandon

please add rowspan to cms grid. It makes portfolio / listing pages so much more interesting.

2 Likes