Streaming live at 10am (PST)

Uneven grid with CMS collection

I know that I can almost do any layout I want using grid, but when I make a CMS collections list I don’t seem to be able to do anything except same row and same columns size. Is it possible to make this sort of uneven grid layout using a CMS collection?

Select a list item and check the selector box, you have an option to style the odd, the even, the first and the last differently.

You can go beyond this by using custom CSS code with pseudo classes like =nth-child.

Here’s a demo:

@vincent I don’t believe the nth-child solution works for collection-generated grids in Webflow. The only solution I’ve seen is to bring a new collection list in for every alternate style required in the layout, as per Nelson’s recent video
It’s seems a bloated way to go about achieving the end result so if there is a custom CSS or JavaScript option for styling dynamic grids in Webflow, I’m keen to see it : )

it works, my example above is exactly that.

I interpreted @eliapingvinen’s question to be specific to styling in CSS Grid, in which case I personally can’t achieve nth-child styling success with a collection list.
Your example doesn’t seem to include CSS Grid? It looks like Flexbox without CSS Grid. If it does, I’m stoked to see a solution, so thank you.