Streaming live at 10am (PST)

CMS list with different layout

Hello lovely community!

I’m on a design quest of making this layout on a section of my homepage:

The tricky part is that I want the cards to be a part of a collection list, by now I designed the cards in a collection list grid ( You can check my read only link) tut cant find the way to make that custom “space” in the second and third column. I saw some custom code that works with flexbox (nth-child) butI’m not sure how to make it work with grid or if its another way to acomplish this layout with a collection list!

All kind help is appreciated!


Here is my site Read-Only: LINK

Look here :

You’ll learn how to target elements and add custom code to style Collection Items of the same list differently. Check the last example, it’s a bit what you’re after.

Thanks for the help Vincent! I’m diving into and I think I managed to add the spacing by just adding a top margin in the second and third child! Thanks so much fur the help, I’m rn viewing all the things you have on that page! Really helpful!

Oh yes, pseudo classes and pseudo elements are very powerful, and a godsend when it comes to Collection Lists. I’m sure we’ll be able to use them without custom code one day soon.