Webflow Masonry grid ( #Pinterest), no Custom Code required

Hahaha! Webflow magic :wink:

7 Likes

I looked in this but I don’t see how it was accomplished.

2 Likes

You girl are awesome :heart_eyes:

3 Likes

Can you share your read-only link?

3 Likes

Here it is:

https://preview.webflow.com/preview/opsrc-12471d?preview=213578e1124f4b9954760e08ffdaa7c4

2 Likes

Ok - I got the masonry grid but it doesn’t flow left to right, date goes by column. I don’t know if I like that. Is there a way to paginate my posts so I can make sure it’s fresh content in the grid? I have a million questions right now, I know. I also have a filter issue with the same site.

5 Likes

Awesome find! but I can’t get it to work :weary: can you explain a little bit more how to achieve that?

I tried putting various images inside a Div or Div’s inside that first Div but it doesn’t work and I get a strange cut on the images (div’s).

Thank you very much in advance.

1 Like

Hi @aaronocampo,
For proper alignment, make items inside the “grid div” display: inline-block and make sure their width is 100%.
Try it and let me know if it fixed the problem.

Cheers,
Anna

5 Likes

EDIT: Made it Inline Block, as you mentioned in one post. Solved! :smiley:

@sabanna Thank you so much :smile:

But there is one thing I cant solve
The ending of one block continues to next row,

see img

You know what Im doing wrong?

https://preview.webflow.com/preview/testings-ccae61?preview=086f8c863cc4142c7c63cd82ede3517f

2 Likes

Getting here a little late… If I could hug you through the interwebz @sabanna, I would! Thanks!

2 Likes

Hi @krubens,
what if you will put rich text block in wrapper div? I think in that way it has to count like one whole item, not a text.

1 Like

:slight_smile: you are welcome, glad that it become really useful stuff

1 Like

All boxes are Divs, just hadn’t set them to inline block, that saved the day :smile:

2 Likes

Thank you again Sabana, YOU ROCK!! Worked like a charm.

2 Likes

For some reason it is not possible to integrate a webflow slider in the columns: when the slider is positioned after the first column the content (slides, left + right arrows, slide nav) doesn’t show up. I have been looking for a solution, but up till now I didn’t succeed. Any ideas?

Edit: It is an issue in Google Chrome mac, but not a problem in Safari or Firefox mac.
Readonly link of the raw material:
https://preview.webflow.com/preview/buro-tank?preview=ca77e59b29ee314383a796e13d7164e0

1 Like

First off, thank you so much for all of this very useful info @sabanna! Very excited about using Webflow’s masonry grid feature.

Unfortunately it looks like I have the same issue that @krubens was having, and what fixed his issue doesn’t seem to be fixing mine. I’ve double checked to make sure everything inside my masonry div block is set to inline block with width = 100%, but I still seem to have this weird cutoff and flow issue from one column to the next:

http://kunal-jaura-photography-2739b6.webflow.io/

Please help!

Thanks so much,
Ruheene

1 Like

Hi Sabanna
in your grid there is a flush bottom and top border.
How do you dynamically acceive this, my photos don’t align on the bottom.

thanks
Dylan

http://kusvisual.webflow.io/projects/portraits-of-david-esteban-rodriguez

1 Like

Hello @Ruheene_Masand_Jaura,

From what I can see on published site, you create masonry grid from the div, which is wrapping dynamic list. I would suggest making grid from DYNAMIC LIST itself and DYNAMIC ITEMS would be masonry items with "display: inline-block settings.

More details I can tell only with read-only link.

Cheers

1 Like

Hi @Dylan_Flowers,

With dynamic data, you can’t control this, unfortunately :frowning:
If the gallery is static I usually simply reorder items so the whole gallery looks more aligned on the bottom.

1 Like

This fixed it, thank you so much! :smile:

2 Likes