Streaming live at 10am (PST)

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.