Streaming live at 10am (PST)

Stacking organically in a grid


#1

Hi there, I'm trying to use the flexbox feature to recreate the people grid for my website. If you check out "People" page, that's what I'm trying to achieve, and if you check out "People copy 2", that's as far as I got for the grid. Is there anyway to achieve the same result using flexbox?

Also the WISIWIG doesn't show the hover effect properly when the div block is contain in the profile AND in a flexbox format.

Thanks,
Michael


Here is my public share link:
https://preview.webflow.com/preview/sos-design-wesite?preview=cd91714198fc7715d702e80a2379d378


#2

Hello @mbut,

From what I see, you are trying to create Masonry grid by using flexbox.
For doing this you need:
1) give some height to flexbox container
2) check option WRAP CHILDREN
3) set flex layout direction to COLUMNS
4) give the width to flexbox item, depends on how many columns you want to have (45-50% = 2 columns, 30-33% = 3 columns, 22-25% = 4 columns, etc)

Flex items order will be vertical, same as you have on "People page"

This method is not perfect because you have to keep flex container with some fixed height and if user will want to change browser window size, flex item can "jump" out of this container and create next column outside.

You may want to try another method too (CSS columns): http://forum.webflow.com/t/webflow-masonry-grid-pinterest-no-custom-code-required/23551

Same effect, but grid container has height: auto and no matter how browser window will change, it will keep columns as it set.

Regards,
Anna


#3

Thank you @sabanna! This is very helpful!


#4

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