Blank spaces between the columns

Hello there!

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?

https://preview.webflow.com/preview/fonseca-macedo-42161fe9d4e07c72c5ff4da0?utm_medium=preview_link&utm_source=designer&utm_content=fonseca-macedo-42161fe9d4e07c72c5ff4da0&preview=2d1cebb2072be69d7e751d3ba324654f&workflow=preview

thank you


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

Hi Helena,

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 :slight_smile:

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.

Peter,

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, :grinning: 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.
1 Like

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! :slightly_smiling_face:

1 Like