Trying to create feed with flexbox

I’m looking to create a ‘feed’ grid where I embed different social media updates.

But since these have different heights, I’m having a hard time figuring out how to make each child wrap straight under each other (and not just wrap under the longest/heightest block).

Maybe it makes more sense when looking at it so far: http://new-botsupply.webflow.io/

Anyone has any ideas how to do this?

Thanks!

Hi, probably doable, do you mind sharing your read-only link?

1 Like

Thanks @vincent

https://preview.webflow.com/preview/new-botsupply?preview=80d1f8f66f3949d8bf6700c6eda469f1

I also played around with creating a container for each column with posts going down using ‘Direction: Column’, and that worked. But that makes it really difficult when going on smaller screens to show the posts in a chronological order (because it will always show all the posts in the inital column before going to the 2nd and 3rd).

Any help is much appreciated!

Your talking about making a Masonry grid, like pinterest?

Thats not possible with flexbox. When CSS Grid comes next year that will be possible, if I’m not mistaking :slight_smile:

Hah, yeah excatly same idea as Pinterest apparently :smiley:

Thanks for the comment :slight_smile:

1 Like

You can actually approach the result, the trick is to

display: flex;
flex-direction: column;
flex-wrap: wrap;
height: something;

So it’s a flex, column, with wrap AND a height defined, to force children to stack like bricks. You’ve got to adjust the height for the elements to fit in the viewport.

http://vincent.polenordstudio.fr/snap/kceg2.jpg

2 Likes

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