Easy Masonry Grid Image Gallery in Webflow | Grid Like Pinterest

[@kerim4973]

Hey Vako, I’m so glad you are producing the KZbin videos finally! Recently my agency moved to Webflow, so I took your course on Udemy and oh dude. From all over 50 courses I’ve taken, you were the best teacher. I’ve literally doubled my agency’s revenue. I take you as my mentor Vako really. Keep the awesome videos up. - Kerim

[@VakoDesign]

wow. Love to hear such success stories. Thanks for your kind words.

[@KD-ro4iy]

This just saved me a huge headache, thank you! Exactly what I was looking for

[@nikolettreiz7481]

I love the thorough explanation! Thank you!

[@bakai.ibraimov]

Thank you very much! I suffered trying to make it with grid option))) This case was very easy!

[@antonyxenophontos1444]

Thank you for this.

[@AkariStudio-z5n]

Hey, I am not able to add css images in the image box. I can see the field but its not reflecting. Can you help me what I might be doing wrong

[@NayanPatel-xd6vp]

Thank you very much! Vako Shvili

[@saadkhalidminhas]

Nice

[@SofloOnTheCheap]

I just took your course and I'm so happy to now have found your channel! Is there a way to rearrange the photos?

[@VakoDesign]

Sadly no. It has to flow like this like text. There's another way to do masonry grid but it's a little more complex.

[@erickaleman4211]

It keeps the images the same size; they don't layout like a masonry grid. Was this video filmed before the grid update? Should there be a defined size for the images?

[@riccardoinnocenti2787]

Hi there, what if I would like to get the same result but having a left to right masonry grid? I am working on a brand new website for a Photography agency and they really like the style but they would like to be able to place the image (left to right), not on a CMS plan, but I think wouldn't change that much. Waiting for your kind reply thank you for your videos you're really good at it!

[@conafam]

Thanks Vako, great tutorial. I was looking to do a masonry grid for blog posts but using this method wouldn't be idea as the order would display all the most recent down the 1st column first, then 2nd then 3rd. Can't think of a way around this can you?

[@conafam]

Actually, I just found this. No idea if it's achievable in Webflow. Would be great if you could do an updated tutorial some time :-) tobiasahlin.com/blog/masonry-with-css/

[@VakoDesign]

@@conafam Looks interesting. Not sure if it will fit the collection list easily. But I’ll give it a try.

[@conafam]

@@VakoDesign Please, if you do drop me a mention here and I'll check it out. Subscribed now. Ta

[@VakoDesign]

@@conafam It works for a 3-column layout. Here it is in Webflow. Grab the code from the page settings. The rest of the styles are natively applied to `list` and `item` classes. Let me know if you get stuck. I might make a separate video if it works on different column layouts. preview.webflow.com/preview/vako-shvili?preview=e4781a3c61c80cd6eba1fe8413f7954a&pageId=6006f8d3dbf248f9e791cba3&mode=preview

[@meowk2253]

Please help how to rearrange images in gallery? or light boxes :(

[@obrothaz]

Hi Vako, can this be used for e-commerce items?

[@MIKE_OSCAR]

is there a way to change the direction? Instead of now the uploaded images are going down, but can it go from left to right?

[@VakoDesign]

Not with this implementation. I know, left-to-right is what you'd want naturally. You'd think it should be simple but there's actually no native way for Webflow nor CSS to do this. There are some workarounds with CSS but none of them are perfect. Masonry.js plugin might be the best option. masonry.desandro.com

[@MIKE_OSCAR]

i dont get why thats in the typography section...

[@VakoDesign]

In truth it's a bit of a hack. It's a typography feature. You know, when you need a newspaper type of columned layout for text. It just can be used for photos too.

[@MIKE_OSCAR]

@@VakoDesign do u have any idea how to filter it from left to right. Cause the sorting of this is all over the place

[@VakoDesign]

@@MIKE_OSCAR It needs a different implementation add a custom coding. The best option might be using a plugin like this masonry.desandro.com