I’m trying to achieve a very specific grid to showcase some projects on a webflow CMS site. The idea is to create a CMS loop with 1st, 2nd, 3rd, 4th and 5th item that have a different styling and the styling repeats afterwards.
For example: 1st red background / 2nd blue background / 3rd green background / 4th yellow background / 5th black background and it loops for the number of projects (may it be 5 or 28). You would therefore have
#1 red / #2 blue / #3 green / #4 yellow / #5 black / #6 red / #7 blue / #8 green / #9 yellow etc
Since Webflow has a 20 collection list per page limit and since it (might) slows the site down if we use to many “single use” collection list I started doing the following with an embed component :
Create a Collection list > collection item
Give class to collection item and style the first collection item in webflow
Then, style in custom code thanks to css overriding webflow to tweak the item
.collection-list:nth-child(2n) .collection-item {}
.collection-list:nth-child(3n) .collection-item {}
.collection-list:nth-child(4n) .collection-item {}
.collection-list:nth-child(5n) .collection-item {}
It works for the 5 first items… but…
My problem is, it doesn’t exactly seem to work as a loop… and I suppose it’s because 2n and 3n sometimes conflict (for instance when you have 2*3). And I can’t use odd and even with nth-child because the idea is to have it loop only after 5 items…
Does anyone have a genious idea for that ? I’d be forever grateful !
I can’t manage to find any suitable answer on google for this conundrum
Hi Joe,
Your idea is perfect if I wanted only the background color to change
Unfortunately I used the color example just to explain the concept…
The idea is more to be able to build a custom grid with different positioning for multiple elements in the item (for instance picture and meta title would change for 5 different layouts and then repeat in a loop of 5).
Ok, so I posted the question on Stack Overflow yesterday too and got answers
I got the concept of nth-child counter wrong. Here’s the right way to use it apparently :
Therefore you could build complex CMS grids in webflow by using nth-child in custom code.
1/ You style your base item.
2/ According to size of loop you tweak each item using CSS nth-child("sizeofloop"n+“positioninloop”).
To make it easier, you can even style each elements without CMS, publish on webflow.io the page, get from chrome inspector the differences in styling, copy paste into custom code with the right nth-child settings.
Hi Pepperclip, this looks like exactly the solution I’m looking for. Could you share the codesnippet you use in custom code so I can stumble my way into a solution?
Sure !
In my case it means 3 things :
1 — I use a loop of 5 elements, I style the first one in designer, and then in custom code I add CSS to style alternately each other 4 elements in loop.
2 — you need your CMS to have both vertical and horizontal image ready, and a div that shows the image or not according to position in loop
3 — Add a media query condition because you want the styling in mobile to stay the one you design in webflow
Meaning for a loop of 5, applicable only for mobile :
<style>
@media screen and (min-width: 480px) {
/* 1st in loop */
.CLASS-1:nth-child(5n+1) .CLASS-2 {
PARAM: VALUE;
}
}
</style>
I hope that explains the idea more clearly
And of course you can always go check http://heju.webflow.io/projets and reverse engineer with your chrome inspector.
Being new to this I ended up spending hours attempting to use :nth-child(even) within a collection list.
Since I’m new to this the one thing that may make sense to developers flew over my head.
You need to give you collection elements a class.
I left them as ‘Collection List’ > ‘Collection Item’ > my styled elements.
so my code that wasn’t working was:
Hi guys - this is the most useful thread I’ve found on this issue. I have a list of internship programmes in a collection list. I would like to alternate every other collection item to make two changes:
change background color to white
place the image before the text content.
I don’t really want affect the CTA - containing a button
thanks for a rapid response and I appreciate your feedback on use of flex … I am not well versed in CSS and will likely carve out some time to simplify class names!
Hi again. I followed your advice and pasted it in an HTML embed which I placed onto the page.
I’m not sure why it doesn’t work in the custom code section for the page. I wrapped it in and placed in the the section in the page settings - it had no effect?
In the designer and editor you can’t see custom coded css if they are in page settings or site settings. You can only see those on the published site. But if it’s an embed element inside the page, you can see the result in the designer and the editor as well as on the published site.
This is cool! I only just discovered this today and have been using custom css to handle it up till now, but for the basic first, last, odd, even styling, this is excellent!