Streaming live at 10am (PST)

Flexbox with dynamic list


#1

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.

Any ideas?

Thanks!
Roey


#2

Hey @Roey. Glad you like Webflow so far.

Of course you can. It was made in Webflow and you can check it here: https://preview.webflow.com/preview/flexbox?preview=78f49011ac3db6ccea265c2ba8a94185&m=1

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.

Best of luck


#3

Thanks so much! Will try that.


#4

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.

Right? am I getting it wrong?


#5

I'm having trouble with this too. Seems a lot harder than it should be.


#6

@Roey @md673 What are you guys working on?

Share a preview link so we can help you better understand how to use Flexbox with dynamic items.


#7

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.


#8

This helped... https://www.youtube.com/watch?v=YzAWS8gfgh0


#9

Good to know @md673 :thumbsup:


#10

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.

You can see it here


#11

:thumbsup:

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.


#12

Thanks @Anna_Kelian. I'm trying to make some of the tiles larger. Is that possible too?

Nice site btw :slight_smile:


#13

Yes sure. What is the condition? Which titles you want to make larger and which keep smaller? It might be easier for me to explain maybe.

Anyway, make sure that your condition(s) is/are set in a way that will make either one of the titles appear and not both or none.

Thank You @Roey :slight_smile:


#14

Interesting. I wasn't aware of conditions, just read about it here. I think I get it now. I'll try to play around.

Thanks again @Anna_Kelian


#15

Anytime @Roey

Enjoy discovering Webflow features and have fun :slight_smile:


#16

Hi Roey

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.

  1. is on Dynamic List that only shows post 1.

  2. is a Dynamic List that shows post 2

  3. 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.

See my fantastic art.


#17

Thanks @krubens. that's a great workaround!

Cheers


#18

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.


#19

That works if its not too many :slight_smile: But I think it will be more than 20 in a page :confused:

Thanx!


#20

I am trying to create something like this with Collections + Flexbox, is this possible?

Any thoughts? Thanks!