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 https://youtu.be/pbyfWrVY2Os
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.
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.
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.
- Add you Collection List to the page/div
- Change your “Collection List” to Grid
- Click on “Edit Grid” and create the areas + names them (preferably in lower case with no spaces). See attached.
- 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!