Streaming live at 10am (PST)

How to make a fluid grid from a collection list


#1

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


Collection list grid with more than 100 objects
#2

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?


#3

This might be what you are looking for:


#4

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


#5

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 =)


#6

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


#7

Thanks for the example @jorn :slight_smile: 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.


#8

@jorn @Sven_Erik_Slattedale

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!


#9

Yes, that’s sort of how I did it. I have diffrent categories and switches for the client to control what ends up where.


#10

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.


#11

I’ll ask my client, but I don’t think is should be a problem. Otherwise I maybe could build something quick to you :blush:


#12

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.


#13

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/


#14

@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)


#15

This topic was automatically closed 125 days after the last reply. New replies are no longer allowed.