Hi everyone, pretty new here but already blown away by the abilities of Webflow.
I want to build a page similar to the Collection Grid example on this Flexbox overview page and I want to have dynamic data in it. Is that possible to do?
I tried working with a Dynamic List but it’s not as flexible as Flexbox. For instance, you can’t create different grids for different screens, or to make one of the boxes larger than others.
Of course you can. It was made in Webflow and you can check it here: Webflow - Flexbox
You can override the dynamic list settings. Simply give a class to each element in the dynamic list i.e. the dynamic list, dynamic item and use Flexbox like you would with divs.
And if you need more help, don’t hesitate to write again.
Ok, tried it, but still can’t figure out how to apply the flexbox to a dynamic list. Here’s why:
In the examples on the site a few div blocks are being used. so each div has it’s own style. On the other hand, in the case of a dynamic list, there is no way to take some of the dynamic list items and put them on separate divs (as far as I understand). when you style a dynamic list item, the style will apply to all items.
I think I’ve figured it out just found it a lot harder than expected. Had a list of companies that weren’t dynamic, client asked them to be in a collection so I’m rebuilding it. Figured I’d be able to just apply the same styles to the dynamic list but it didn’t quite work that way.
Hey @Anna_Kelian. I decided to stick to simple flexbox CMS layout at the end. I couldn’t find a way to style various items differently, they have to have the same style.
Oh I see. You can do it using conditional visibility like I have done here
You create all the different designs in the same dynamic item, then use conditional visibility to show and hide the relevant one.
I think I understand what you want to do. And what you have to do if you want different sizes of the Dynamic Item is create different Dynamic Lists in one page.
is on Dynamic List that only shows post 1.
is a Dynamic List that shows post 2
is a Dynamic List that shows post 3,4 and 5
In this way you can create the grid you want with up to 20 Dynamic Lists in one page.
I had the same issue when I was creating a grid for my portfolio project. I wanted different size thumbnail after 2 hours searching I used this option in the setting pannel in order to only show one item in one list and I created one dynamic list for one project thumbnail. Finally wrap that in flex box and it’s working.