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

Continuing the discussion from Masonry grid ( #Pinterest) in Webflow. Created by CSS only:

So lately, I found out that same CSS Masonry grid is possible to create WITHOUT ANY CUSTOM CODE. All you have to do is use Webflow text columns option for your “grid container” (or div, or section).
Items inside your container could be images, div blocks with text inside, lightboxes, link blocks, but they have to have WIDTH=100%. With every screen type (desktop, tablet, mobile) you can easy change columns option.

So, no more custom code. Masonry grid made with few clicks.

Here is examples:


Also, if you will add some creative you can even get a more interesting grid. Just make some of your items WIDTH=50%. But don’t forget that for this items height should be the same.

Example:

And sure, you can use these settings with dynamic list and dynamic items! :smile:

Regards!
Anna

41 Likes

Great work @sabanna I’m so glad that you found that! :smiley: here’s an example of this working with Dynamic lists: http://flow-in.webflow.io/masonary
Read-Only Link: https://preview.webflow.com/preview/flow-in?preview=99d20c3007c32ab09ef1da4455a8de8c

Have fun! :smiley: I added a loading screen to this page (which fades out once assets have loaded).

10 Likes

Yeah! Really there are so many possibilities with such easy way to create this type of grid! :smiley:

3 Likes

my goodness this looks cool! We need a wiki…

4 Likes

Absolutely brilliant. You just moved from hero of the day to hero of the week. =)

6 Likes

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