Streaming live at 10am (PST)

Masonry Layout With Flexbox


#1

Hi,

Anyone know how to make a Masonry Layout with Flexbox? I have tried to analyze code and played around with flexbox, but I can't seem to get it to work.

Thank you for all help :slightly_smiling:


#2


This might help :slightly_smiling:


#3

This I know of :slightly_smiling: But the sorting doesn't work on blogpost or just in general.

I know flexbox works as a masonry trough code, but I can't seem to get it to work i webflow.


Pinterest style feed with flex and dynamic lists - Help :(
#4

Hello, @krubens!

For creating masonry grid with the flexbox you will have to five to flexbox container fixed height or fixed width, depends on layout type (vertical or horizontal).

Because of this, masonry grid with flexbox may become pretty advanced task.

Regards,
Anna


#5

Ok. I got the "ide" from HERE

It have the same sorting "problem". With second image coming under the first one, not to the right.

But what I find so strange is that Masonry is so common on so many sites, but it seems so hard to do :stuck_out_tongue:
I'm sure you @sabanna is going to come up with something smart soon :wink:

Thank you for the answer!


#6

That example made with flexbox, with flex-direction: column, that is why second image will go UNDER the first.


#7

This topic was automatically closed after 60 days. New replies are no longer allowed.