How to make a styled-grid using CMS

Design help General
1

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.

test.PNG
test.PNG3795×1609 1.57 MB

Thanks!

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

2

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.

3

Ok check the last demo of this page: 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.

image
image1194×2320 680 KB

1 Like
4

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

5

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