What are we trying to do?

Are you wanting to spice up your CMS layout with alternating styling, but you can't achieve it?

I'm hoping in this guide I'll be able to show the basic method for how we can do this using a tiny bit of custom CSS that lets you alter any styling within a CMS list WITH the ability to change it based on odd or even list items.

Starting off with a our Content Management System list, we may have a common layout such as below, where each item in the CMS has an image on one side, then a block to contain text and other features on the other.

‍

‍

This may look something like this in your Navigator.

‍

‍

Webflow does contain a way to control ordering layout with CSS when you click on your Grid Child element. For example, if I click on blog_image-wrapper, I can select last, and all my images show up on the right hand side of each blog. But this happens to every item.

How do we target only odd/even items to make it alternating?

‍

Webflow has limited ability in this case, as we are able to click on our CMS item and use a State Structure selector to target First, Last, Odd and Even items.

This allows us to do something such as colour the background of odd items, or highlight the first item in a blog to show it as the latest one. But, this state does NOT show up in child elements. Luckily, the solution is achievable with just a few lines of code.

‍

Embedding CSS to target our elements

I’m going to add a Code Embed element just above my CMS item so it’s with the block on the page which, when it comes to CSS in Webflow, reacts within the editor. However, you can add this custom code to your page or to your site-wide code insertion, but it may not be as easy to test it in the editor.

‍

Within this code embed, for my use case, I want to

1. Target the blog_item class, to find the odd items.
2. Within blog_item, I need to select the child element blog_image-wrapper so I can set it’s ordering value. 
3. I can do the same for blog_item-content

‍

As, in my circumstance, I am selecting a child of a child element, I need to ensure my CSS selector knows that the Grid Child, blog_image-wrapper, is within Grid Layout blog_item-link

‍

Here’s how that looks:

<style>
  .blog_item:nth-child(odd) .blog_item-link .blog_image-wrapper { 
    order: 2;
  }
  .blog_item:nth-child(odd) .blog_item-link .blog_item-content { 
    order: -1;
  }
}
</style>

‍

.blog_item:nth-child(odd) allows us to select the CMS item, blog_item, and we specifically target odd elements through Pseudo-class nth-child(odd)

After that, we are further selecting .blog_item-link, and within that, .blog_image-wrapper.

This is because .blog_item-link is our Grid Parent, and .blog_image-wrapper is our Grid Child, which has control over its position within the grid parent.

Inside that, we simply use order to specifiy where this comes. As our image wrapper comes first and our item content wrapper comes after, I'm simply setting the values to make it clear that I want the order to be inverted for both of these elements.

If you wish to customise items in this fashion, ensure you string your CSS selectors as shown above to target the specific child item you want. With this technique you could hide elements, change font sizes, colours etc.

‍

Alternating Grid Column Widths

You may want to, for example, have your alternating grids change size, as shown below.

‍

This is just as easy, for my code example above I have used this:

.blog_item:nth-child(even) .blog_item-link {
  	grid-template-columns: 1.5fr 1fr;
  }
  .blog_item:nth-child(odd) .blog_item-link {
  	grid-template-columns: 1fr 1.5fr;
  }

This CSS is allowing me to capture the Grid element, and set the width of the columns. Using 1.5 fr and 1 fr, I end up making the first column 50% wider. You could use 2fr and 1fr if you want it to be 2/3 with and 1/3 width. Or any other combination of sizes. This will also work for more than two columns, just specify the widths in this same method as I have done for two columns.

‍

Disabling Our Changes on Mobile

The final stage in this setup is to know how to change the layout based on screen width, as our mobile layout may not have a side-by-side layout, instead using top to bottom. Switching order in this layout generally looks untidy, but we can resolve this easily.

Simply putting our code block into a media query that matches out webflow breakpoints, we can ensure this code only works above a certain width threshold. For Webflow, 991 pixels width is where the Tablet mode activates, in my site I wish to stop this layout here, so I say a minimum width of 992px is where this CSS will work. Below that, I will have a consistent order of Image, then Text content.

Our final code may look something like this.

<style>
@media (min-width: 992px) {
  .blog_item:nth-child(odd) .blog_item-link .blog_image-wrapper { 
    order: 2;
  }
  .blog_item:nth-child(odd) .blog_item-link .blog_item-content { 
    order: -1;
  }
  
  .blog_item:nth-child(even) .blog_item-link {
  	grid-template-columns: 1.5fr 1fr;
  }
  .blog_item:nth-child(odd) .blog_item-link {
  	grid-template-columns: 1fr 1.5fr;
  }
}
</style>

‍

I hope that this guide explained the thought process behind making this system work in a way that you can replicate for your needs.

‍

If you'd like to get in touch, feel free to contact me about any of your project queries.