▼
Streaming live at 10am (PST)

Flexbox for masonry left to right ordering?

#1

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)

#2

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

#3

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?

#4

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

#5

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

andre4.jpg1395x723 293 KB

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

Hope this helps :wink:

#6

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