Create Cms Layout With Alternating Image Grid (Nth-child)

By using the <li-powerful>:nth-child<li-powerful>, you can select elements based on their index (source order) inside their container

Webflow has a built-in way to alter the nth child. You hover over the collection item itself and choose one of the structures that are available

Select the first item to alter how the first collection item looks

Select even items to alter how every even item will look

So is it all good? Not really

Webflow does limit the ability to make minute changes in the children of each collection item. But with a little code, you can do that easily

Place an embed in the page and edit the relevant script that you need

Here’s a quick explanation of what each element means,

<li-powerful>your-collection-item<li-powerful> = This is the class of the collection item (naming it will be better instead of using “Collection Item 5” as the name. Replace that here

<li-powerful>nth-child<li-powerful> = This is the child element in the item that you want to style. Replace that here

<li-powerful>3n+1, 3n+2…<li-powerful> = 3n means the number of items you want to style individually after which it starts repeating itself for the remainder of the items. 3n+2 means the second item in your collection. It can be 4n, 5n, and so on, depending on your use case

Advanced uneven custom CMS grid

Sometimes, you would want your CMS collection grid to be in this way. Here, the collection items are uneven and placed in a custom order. To achieve this, you would be using grid areas and a little custom script

You would first Place a collection list and turn it into a grid. Create the rows and columns (in this case, I created 3row and 3 columns). Then set the grid areas in it.

These are my areas for this case

You can also set grids areas using your mouse. Add an area and the drag the area box to cover the rows and columns accordingly

Now, name those areas (these names will then be used in the code script. In this case, I named them first, second, third, fourth, and fifth)

Then place an embed and paste this code

You can see the list update live in Webflow Designer.

The idea behind this is that in Webflow, you would set the area. Then, with the script, you tell Webflow to put the collection items according to the area you set

Custom code solutions that just works with Webflow's CMS. Made for newbies not familiar with coding
No items found.
Webflow custom code library

Webflow - Code to the Rescue

The Webflow Library for custom code snippets that unlocks powerful possibilities in Webflow. Includes hand-picked and tested custom code that you can use in Webflow Projects.

Open Library

Need further help?

Need further help in understanding the resources or how to implement them? Feel free to reach out

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Ali Saeed Graphic Designer Kuwait

About Ali Saeed

Ali Saeed is a Kuwait-based web designer and Webflow developer who has been working as a graphic designer for 4 years, building social brands, company profiles, and presentations. He recently jumped into web design and development. As a web designer, Ali focuses on clarity in design layout and messaging strategy. In his free time, he loves to help the web community, solve problems, and build resources for web designers who want to optimize their websites using Webflow.

Send an email if you'd like to collaborate :)
View his portfolio website