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.

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