Blank spaces between the columns

Design help General
1

Hello there!

This is my news list that i design (desktop version)

1
11920Ă—1057 121 KB

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:

Untitled-1
Untitled-11920Ă—1080 224 KB

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)

2

Hi Helena,

Love the site btw

You need to make a 3x3 grid and accordingly place the news (see below)

Screen Shot 2022-05-24 at 8.41.46 PM
Screen Shot 2022-05-24 at 8.41.46 PM1920Ă—1200 148 KB

You should add CMS element to it as well, so you can create the news pages

Hope this helped :slight_smile:

3

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:

8e8254405353e96519bb9abcfa7b37205a479762
8e8254405353e96519bb9abcfa7b37205a4797621920Ă—1200 270 KB

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

4

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.

1 Like
5

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

6

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
7

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