I plan to make a fullscreen fluid grid where some of the items has different width and height. The grid has to be a collection list because it must be controlled by the CMS. But since all the item elements in a collection list is duplicated, its impossible(?) to have different class/comboclass on the collection list items. Anybody know a workaround on this?

While trying to build a real masonry layout (also called Pinterest layout) using Webflow and pure CSS i gave up...the masonry hacks using CSS columns will build a fake-layout (vertical orientation) which might be okay but is useless to me so don't fall for this when searching for masonry layout css :smiley:
Instead, I decided to give masonry.js a try as it only adds 5 lines of custom code to your Webflow project, super easy to integrate even for beginners.
FYI: Inside Webflow Designer, the …

For the front on home I used the different collections from the different categories and used featured so the client can choose which one ends up there. And on the category pages I used the limit feature as Per suggested. So I had to drag in the same collection multiple times to get the layout I wanted.

I have found an easy way to do this. Set up a fluid grid in flex, use separate collection list elements in each flext list items linked to the same collection list and set limit items to all elements like this:

Is there any chance you can share the webflow file for your website? I have to create something very similar to your design. But I’m super new to webflow and have no idea how that CMS thing works. I’ve been struggling with it.

He jorn thanks for the quick response. I just started a new job and they have deadlines for me to build websites already. Basically they’re asking me to build something super similar to this:forbusiness.snapchat.com

Gain new perspectives on the best ways to reach Snapchat’s unique audience.

I am super struggling with creating an image grid (CMS, collections list based) that has different sizes like the Snapchat blog and your clients website. Then I can’t figure out how to do a solid color overlay over an image. I’m super new to this. If you could build something that doesn’t actually take much of your time I would highly appreciate your help. I’m just very frustrated right now.

It’s pretty straight forward, I made a flex container and inside I put flex childs. Inside the childs I inserted a dynamic list. In every child I limited the dynamic list to only show one item, and from where it should start counting, the seconds list shows only one item but starts counting from 2 and so on. So in my example I had to drag in the same dynamic list ten times.