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:

https://sbx.webflow.io/nth-child-targetting-for-coloring-an-inner-element

@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 https://youtu.be/pbyfWrVY2Os
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.

1 Like

Hi @vincent, thanks for the demo! I have a doubt about how it could work in the case of wanting a design in which the first item occupies an entire column and the other items are in the second column, as I show in the photo.

Hello @eliapingvinen, @Fathom & @Patricia_Rodriguez! hope this helps you.

The process is fairly simply, but does require some custom code. I HAD to do it this way in order to avoid duplicate CMS collections being filtered… resulting in the same items being found.

  1. Add you Collection List to the page/div
  2. Change your “Collection List” to Grid
  3. Click on “Edit Grid” and create the areas + names them (preferably in lower case with no spaces). See attached.
  4. Create a Custom HTML embed and target the “Collection List” Class that you previously made a Grid of… then target you children with CSS and assign them to their area. See attached.

Hope this helps!