Flexbox for masonry left to right ordering?

[Rowena (Rowena Harris)]

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)

[Nita (Sónia Alves)]

Hi Rowena.
Are you looking for something like this?
http://mercearia-andre.webflow.io/#noticias

[Nita (Sónia Alves)]

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?

[Rowena (Rowena Harris)]

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

[Nita (Sónia Alves)]

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