Streaming live at 10am (PST)

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?


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:


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.

closed #7

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