Easy Masonry Grid Image Gallery in Webflow | Grid Like Pinterest
HTML-код
- Опубликовано: 11 июл 2024
- Masonry grid is a super neat layout for image galleries. Images don't usually come in the same shape and form. Some are in a portrait mode, some in a landscape mode, and some are square. If you display all your images in the same shape, you'll end up cropping a lot of them that don't fit your shape, losing that original composition the photographer intended.
With a masonry grid, you can preserve the original shape of all images and have a layout that looks exciting.
--
Want to learn web design? Try my course:
🤑 Full course & discount 👉 www.vakoshvili.com/webflow-co...
Hey Vako, I’m so glad you are producing the RUclips 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
wow. Love to hear such success stories. Thanks for your kind words.
This just saved me a huge headache, thank you! Exactly what I was looking for
I love the thorough explanation! Thank you!
Thank you very much! I suffered trying to make it with grid option))) This case was very easy!
Thank you for this.
Thank you very much! Vako Shvili
Nice
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!
Hi Vako, can this be used for e-commerce items?
I just took your course and I'm so happy to now have found your channel! Is there a way to rearrange the photos?
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.
Hello Vako, thanks for creating such an amazing content I do have a request for a video, can you please show me how did you record the prototype in figma and add it on the go green city website & how did you create that prototype.
Thank you for your hard work.
I had to use an animation software. I think it was Principle or Flinto. I’m not really good at them though. Just used it once for that one time.
@@VakoDesign thank you so much for this information.
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?
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/
@@conafam Looks interesting. Not sure if it will fit the collection list easily. But I’ll give it a try.
@@VakoDesign Please, if you do drop me a mention here and I'll check it out. Subscribed now. Ta
@@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
Please help how to rearrange images in gallery? or light boxes :(
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?
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?
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
i dont get why thats in the typography section...
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.
@@VakoDesign do u have any idea how to filter it from left to right. Cause the sorting of this is all over the place
@@Mike_Oscar It needs a different implementation add a custom coding. The best option might be using a plugin like this masonry.desandro.com