This is my news list that i design (desktop version)
I made it with columns (3 columns) and then i putted divs inside them, to make a list. I made it this way because i dont want the blank space between the columns, when you have one that is bigger than the others.
But on responsive the order that they wrap, is not the order i want (and it makes sense because the columns wrap like this).
For example: I want the order by the way you can see on this image:
Can i make this in another way to make the columns wrap in the right order, and the divs align themselves depending on the size they occupy (without leaving blank spaces) ?
This is my read only link. Can you check this please?
Here is my site Read-Only: LINK
(how to share your site Read-Only link)
Love the site btw
You need to make a 3x3 grid and accordingly place the news (see below)
You should add CMS element to it as well, so you can create the news pages
Hope this helped
Hello @AliSaeed thank you so much for your reply, really aprecciate it!
The grid is a awesome way, but i continue struggling with the blank space between the news.
Here is what i want to do:
I want to eliminate this blank space (x) and the new that is under (the one with the logo of drawing room) fill this blank space.
Is it possible? I already saw websites with this kind of structure but i really dont know how to do it.
Again, Thank you so much @AliSaeed
Hi Helena, This isn’t exactly the solution you’re after as the collection items will flow vertically before they flow horizontally but I’ve found a way to achieve a “masonry” layout using a lesser-known CSS property that some people use for text columns. It uses the columns property in the typography section of the style pane. I’ve just made a free cloneable with instructions here: https://easy-masonry.webflow.io/ if you’re interested in taking a look but I thought I’d post it anyway as it might help you or others looking for a simple solution to something similar.
This is literally the best solution! I tried it and it works like a charm
Sorry my bad, never knew you could style with the typography menu!
@Helena, go with Peter’s approach
Thanks for the Love AliSaeed, I’ve also added a Masonry.js version to the cloneable if L-R is important, but it also has some caveats:
- You’ll lose the ability to see the layout in the Webflow designer.
- You might struggle to align the grid with your content above since it uses padding on the collection items for the spacing.
- You might not get a true left-to-right, top-to-bottom ordering since new items will look for the first available vertical space to fill.
THANK YOU SO MUCH GUYS!
Really apreciate yout help, you guys are amazing!
I saw this tutorial too. Create masonry layout
I’m using grid sistem and it works as well!
Again, thank you so much! Keep up with the good work!