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

Hi Sabanna, I know how to do that but how do I make it a grid???

1 Like

In the settings panel for this div, change “Text columns” option. It is just under the text/font settings.

2 Likes

Sabanna, I am close but cannot figure it out. The site is ready for launch except for this! If you could explain step by step like I am a child, maybe ill get it! Thank you so much

1 Like

May I see your read-only link?

1 Like

webflow.com/design/bermanpix

1 Like

Unfortunately, it is not correct link.

How to share a read-only link:

Thanks in advance! :slight_smile:

Cheers,
Anna

1 Like

https://preview.webflow.com/preview/bermanpix?preview=f0166791d8eed1c0b820c4415ff502b5

thanks!

1 Like

I am trying to make the masonry grid on the Israel page…

1 Like

Hello, @berman_J

Here is video screencast how you can create masonry style gallery on your site:

Regards,
Anna

4 Likes

Hey Anna

Could you please re-list this on youtube or something - I have trouble watching it as it keeps stalling and it says - this video is unlisted…

regards

1 Like

Maybe this one will work better:
https://drive.google.com/file/d/0B-7cg8BSq1Z_TV9ROVFfQlpreUU/view

1 Like

Thanks <3 Thanks <3 Thanks <3 Thanks <3 Thanks <3 Thanks <3 Thanks <3 Thanks <3 Thanks <3 Thanks <3 :cupid:

1 Like

You are welcome :slight_smile: :slight_smile: :slight_smile:

1 Like

Hey Sabanna,

Can you display the content horizontally instead of the content displaying down the column. I did everything correct but Im doing a event listing so the order is by date and I goes down the column instead from left to right. Is there a work around for this… Thanks girl!

1 Like

Hello, Anya!

Unfortunately, with the method that I used here, it is impossible to make content build up horizontally.
You can try to use flexbox settings for creating that type of grid, but it will not look the same way.
Or you can use external jquery plugin, which allowed changing the grid way.

Cheers,
Anna

1 Like

Ok thanks for your advices. it still is a great solutions for masonry design! =)

2 Likes

Hey there. I keep getting the issue where a part of my box will cut away and appear at the bottom of the next column.

Any ideas who to keep everything aligned?

1 Like

Hello, @moofawsaw!

Items inside the masonry grid have setting display: inline-block. It looks like yours might have settings display: block.

Regards,
Anna

1 Like

@sabanna, you said that making the individual items within the masonry grid flow from left to right instead of up and down would require some jquery trick. Do you know what that trick might be? Or is there someone on the Webflow Staff who knows javascript/jquery really well and could help us with that part?

Thanks so much!
Chase

1 Like

Specifically using the Masonry plugin, which has been discussed elsewhere in the forum.

1 Like