Streaming live at 10am (PST)

Flexbox for masonry left to right ordering?

Can anyone help?

I’ve been trying many different methods of creating a masonry grid for a dynamic list.
I want the order to go from left to right (i.e the most recent dynamic items run across the top row, and then 2nd row and so on) - and the rows to be flush (no incongruous ugly spacing)

Flexbox seems to enable a left to right ordering, however it doesn’t give a true masonry - there are still spaces between my rows of items, dependent on the largest item in the row see here: LINK

I know if I revert this to columns the spaces are removed…but I then my items will run vertically, which I don’t want.

Basically, does anyone know if there a way to use Flexbox with an order left to right, and have flush spacing between the rows just like you see when you use columns?

Bah! Help would be great - been starring at this one far too long!

Here is my public share link: LINK
(how to access public share link)

Hi Rowena.
Are you looking for something like this?

On the example above I’ve used columns but with no specific order.
Maybe trying to replicate the masonry grid using divs and float left may be a solution?

Hi Nita, Yes this looks great - exactly as I was looking for…however importantly it needs to work with a dynamic list which flows from left to right…is this what also happening with yours? x

Hi Rowena,
Not really… Each tile is displaying info from specific categories.

For what you are trying to do, you have 2 options:

1- Use columns like in my example and control the order of the displayed items per row and column

2 - Use Div blocks and play with floats to achieve the left to right effect

Hope this helps :wink:

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