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:

Anyone has any ideas how to do this?


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

1 Like

Thanks @vincent

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.


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