Hi all
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?
Christoffer
I’m bumping the post with a sketch of what I’m trying to make. One collection list with items that have different widths (and layout). Any ideas on how this can be solved?
This might be what you are looking for:
Hi it´s possible to do if you use multiple collections and then put a limit of each of them.
So on your example that would be 4 collections.
1: Col. item 1-1
2: Col. item 2-4
3: Col. item 5
4: Col. item 6
Hope this helps
Hey Christoffer
I made this one https://www.jakobssonpusterla.com a little messy to set up you want it to be simpler but it works when it’s done.
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.
Hope it helps =)
I’m in the middle of a redesign of a magazine, and I’m just splitting the cms up, like @perkristian explained, and then using sorting and filtering orders.
Still got a LOT of work to do on my project, but you can check out how I’m doing it here:
https://preview.webflow.com/preview/lyd-bilde-redesign?preview=487f0456f337cf1bd160ba01c1543aac
Thanks for the example @jorn 
I will try something like this, using as few collections as possible so that the CMS dont get too confusing to use for the client.
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:
Start from: 1 and limit to: 1
Start from: 2 and limit to: 1
Start from: 3 and limit to: 1
Start from: 4 and limit to: 1
Start from: 5 and limit to: 1
and so on…
This way you can make a fluid grid layout from only one collection list!
Yes, that’s sort of how I did it. I have diffrent categories and switches for the client to control what ends up where.
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.
I’ll ask my client, but I don’t think is should be a problem. Otherwise I maybe could build something quick to you 
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:
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.
I’m in Sweden and it’s Thursday night here right now. Tomorrow I’ll be busy all day so maybe I could make something on Saturday for you.
It takes some time to learn a tool like this. Be sure to check out https://university.webflow.com/
@Timbo2510 I tried doing a similar grid as Snapchat.
https://preview.webflow.com/preview/cms-grid-demo?preview=299eea56d1f020fbf74d3ca1f22f16c8
Here’s the demo: http://cms-grid-demo.webflow.io/
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.
Let me know if you don’t get it and I’ll try to explain better.
Good Luck
(didn’t make it responsive)
This topic was automatically closed 125 days after the last reply. New replies are no longer allowed.
