Streaming live at 10am (PST)

How to make a styled-grid using CMS

Hello everyone! I’m trying to use CMS to create a sort of styled grid whereas every other row is arranged the same, as seen in this picture. I’m trying to find a way to accomplish this styling using CMS. I’m aware that I could style each one individually, limiting each CMS list to 1 item, however using this method I’d only be able to have 20 on each page. Does anyone know how I could pull off this effect? Potentially using an “nth” in custom code? I don’t code but I have a basic understanding of how to integrate it.

Thanks!


Here is my public share link: LINK
(how to access public share link)

Also you’d get a hit in performance in the designer.

You can use pseudo classes to achieve what you want. Let me a couple of minutes to adapt an example for you and I’m back. You should post our read-only link.

Ok check the last demo of this page: https://sbx.webflow.io/nth-child-targetting-for-coloring-an-inner-element

I’m using flexbox for the layout of the items of the list. With pseudo class :nth-child(even) i then target every other one, then its image child. Then I add the CSS rule of order:1 to the image, so that it inverts the flexbox order. So all even lines have the image on the right. No need to also do something on the even lines, they stay as they are.

1 Like

Vincent,

Thanks for your reply! So I understand the logic - you need to call on every other (even) CMS item, then set the image order for that image in the parent flexbox to “1”. That should make it so that every other image is aligned properly? However I don’t know how to integrate into my site. I’ll make the site readable for you.

https://preview.webflow.com/preview/music-midtown-demo?utm_medium=preview_link&utm_source=designer&utm_content=music-midtown-demo&preview=0532363d7daf2ef7897c825a6f270ece&pageId=5e9ba54a38205a6065d18944&mode=preview

Vincent,

Eureka! Nevermind on my last response. I kept digging, and figured it out! I didn’t know how to target a child element in css originally, but once I found out how, the solution was quite simple! Thanks for challenging me :slight_smile:

For those wondering, here is the code that I used. I see a ton of potential for “nth-child” in the future!

<style>
.vendor-cms:nth-child(even) .vendor-photo{
order:1;
}
</style>
1 Like