Streaming live at 10am (PST)

CMS collection in single and double column grid


#1

:wave: Hi there

I’m trying to achieve a CMS Collection list layout that is a single column and then double column repeating.

Please can you help nudge me in the right direction of how to do this?

Thank you!


Example in text:

Collection item 1 = Single column

Collection item 2 + 3 = Double column

Collection item 4 = Single column

Collection item 5 + 6 = Double column

And so on…



#2

Hy Dylan.

Because the styling applied to a Collection Item is automatically applied to all the items, you can’t.

Or can’t you?

Once Webflow has applied its styling, you can still add custom CSS code in the page, that will be executed on top of it. So can CSS target specific elements in a list of elements?

Yes it can! With the :nth-of-type selector, CSS can target a precise element in a list. For example .collection-item:nth-of-type(3) will target the third item of a list. .collection-item:nth-of-type(odd)
will target every other elements, the odd one (of course even exists too). And there’s more, .collection-item:nth-of-type(3n+1) will select every other third.

And with the :nth-child selector, we can target specific childs of an element. Here we need a special styling for the last two of every group of Three element, or the first one of a group of three. Let’s use this.

.w-dyn-item:nth-child(3n+1) does just that

Now we need to make sure our design is ready for it, you need to style your list using Flexbox, and you need to be sure that when an element is complete (color + description) it takes up a line, and when the description is hidden, cells stack up next to each other. You’ll find a way as I did I’m sure.

Now, as we’re targetting the first element of every group of 3, we need to hide the description cell by default. My structure is simple:

  • .collection-item
    – .div-bloc-7
    — cell <- this is the colored cell
    — .cell2 <-this is our description block
    .
    So by default, let’s hide all the cell2 elements with display:none

We get that:

Now let’s use CSS to target the cell2 element inside of the div-block-7 element inside of the first collection item of every group of 3, and show it (passing it display:block

.w-dyn-item:nth-child(3n+1) .div-block-7 .cell2 {display:block;}

Boom

Now please go vote for all the ideas of the whishlist asking for support of special selectors and pseudo elements in Webflow: https://wishlist.webflow.com/ideas/search?utf8=✓&query=nth

Thanks!


#3

@vincent Thank you so much! Will try this out soon and let you know how it goes. Really appreciate the effort you took to help :slight_smile:


#4

You’re welcome, I wasn’t sure how well it would play with the CMS so I had to test for myself. The hardest part is to set up the Flex collection list properly for that to work.

So the most difficult part is this one:

you need to style your list using Flexbox, and you need to be sure that when an element is complete (color + description) it takes up a line, and when the description is hidden, cells stack up next to each other.