Pinterest Grid With Webflow
ฝัง
- เผยแพร่เมื่อ 25 ส.ค. 2024
- Learn how to build Custom designed websites with Webflow:
zpr.io/g4WCp
-
Flux is proudly sponsored by Webflow, start a new account with an awesome discount:
bit.ly/FluxWebf...
-
Instagram: / ransegall
Twitter: / ransegall
-
Gear & Book Recommendations: bit.ly/2ohFOuj
3 years later and this video just saved me a ton of time and frustration. Thanks for the video🙏
amazing workaround! was looking all over for this thank you
Gosh, I was just working on my first project that required this grid for a CMS page. You're the best for posting this tutorial Ran, I would have never figured out I can do that from type settings...
Thanks so much! I spent lots of time trying to figure out the gallery but this works 10 times better!
Ahh I was searching for exactly this for hours, and here we are 3 minutes in and I have exactly what I needed. This was a lifesaver and the easiest hack ever- not sure how you came up with it but thank you so, so much!!!
That's ridiculous. I spent a whole morning trying on my own. I'm speechless!!!
Thanks for sharing - brilliant!
Awesome pro hack with the CMS and text layout adjustment. All your hard work is greatly appreciated!! Also, I'm loving the class. You're last marketing push paid off!
Thanks Tommy!
It's a great Webflow hack! Btw, If someone here is wondering, you need to add the typography column display to the collection list for dynamic images/projects ect..
OMG THANK YOU! I've been struggeling to get this done with javascript and it was buggy as hell: this is SOOO much better!! Thank you Thank you!
Thank you @ransegall for this tutorial, it has helped me a whole lot!
Webflow Newbie question: Was wondering if it's possible to have the images be sorted from left to right as opposed to top to bottom? Any help would be great!
Did you figure it out?
@@shivamshetty5558 Unfortunately not, any tips?
@@ianjeimz
This solves it for me, check it out
th-cam.com/video/T0aBQ0tEfZ8/w-d-xo.html
did you figure it out now? i have the same question
Unfortunately this feature is totally busted when you try to use them for blog style boxes. The boxes don't act anywhere near the images and they get cut off at random intervals. anyone have a solution to this?
Same here. Haha here looking for the answer
Oh I figured it out. If you style the internal boxes with an inline-block as oppose to a block then they stick together.
@@holidaaays Your comment just saved me! Thank you for sharing!
Thaaaaaank youuu!! this comment is AS IMPORTANT as the whole tutorial@@holidaaays you rock!
I was struggling with this grid this very morning. What a good coincidence. Thanks for the video as always Ran
That’s so smooth.
That was crazy! You weren't joking about two minutes.
The simplicity is magnifique 🙌🏽
Wow thank you so much! Exactly what I needed!
Sir to manage this grid with CMS??? please guide me
ohh, nice hack! Thanks for sharing Ran!
I'm adding photos and they keep moving down even when replacing an image. Is there any way to keep them fixed?
Always nice to see how things are done!
can't believe how simple this was. You saved me so much time :D
can i add text above every image in the grid? (without cms)
this video is absolutely awesome. thank you so much
Amazing! I was trying to use grid for my portfolio site. But this saved a ton of my time.
Really appreciate ❤🎉
Is there a way to do this and incorporate the lightbox feature?
Really...REALLY...helpful video. Thanks a lot!
Oooh, cool! I didn't know this can be done so easily! Thanks man!
Wow! thanks so much for the power tips, Ran!!!
Thank you, this is amazing.
Thanks Ran
Thank you for making this video!
Very helpful Ran.. thanks!!!!!!!!
Now THAT is dope! Hey hanks for the share Ran 😎🔥👌
how can i get all the images to be level at the bottom??
Great hack Ran! Very Useful.
Really Helpful, Thank you
I forgot how fast you are using webflow, i remember one video of you showing webflow to Travis Neilson that video was the eyeopener for me. Great tip, i was struggling to get the masonry js on my project.
Great tutorial! Thanks!
Webflow is amazing but why on earth is it so expensive ? I need a subscription for my workspace and then i need a subscription for every site which adds up quickly... few sites done and you notice that you have to pay thousands / year., the plan system feels very off but i would love to use webflow for many projects
hey flux! nice video! How can i have a horizontal order through the columns if I use a collection list? Also, Is it possible to have pictures with different heights even when using a collection list? cheers!!!
Holy Shit. You just blew my mind! Thank you soooo much!
Thank you !!
do these stack one on top of the other in phone view?
My f'n hero. I was about to throw the cat across my office.
What camera are you using? It looks amazing, also great content :)
Hello Ran, I got a bit confused when you named the second container, the first container you named it "imagegrid" and the second named it "pinterestgrid." When did you add the second container? I watched several times and don't see the second container being added.
Oh man, this one I really love👌💪
Hi! Really love your content and wanted ask if you made a tutorial on a grid like this but horizontal. Also as this 3 column grid occupies 100vw, in coding it would be easy but I just don't manage to add the logic here : So I want to have the grid take 100vw in a div and a hidden sticky div that takes 30vw and that appears on click, when it appears it pushes the content, so squeezes it. would you know how to proceed? thanks in advance!
the images are stretched for me
Wow!! Thank you!
Ran I don't know how to say this but.... I love you man. Thank you so much for this haha!
I am warming up to him too.
Well, i think it is not like pinterest. maybe i am wrong. if it was like pinterest, when you change the columns from 1 to 3, the first photo of the second column should be this one with the colorful window.
how to get the direction for the images from left to right...
Oh that's useful! I'm gonna try this right away :)
You're a god damn magician. God bless you.
Hey Ran, I set up a grid on Webflow but when I upload images they do not fit the grid. Is there a trick or setting I can use to get photos to fit the entire column?
Same issue here. The images are cut off at the top and continues at the next column.
.img {
width: 200px;
height: 400px;
object-fit: cover;
} - try this and modify it with the desired image size in px. ".img" is the class name your photos have, so replace it.
Hi flux, very impressed with the content you provide so regularly, will you be doing a video on getting proposals and contracts in place?
I think I already have some!
If I have lots of images and they are set to lazy load, then as I scroll the grid keeps reshuffling the photos and moving them around since they're different sizes. How can I fix this from happening??? Help.
yeah that's a problem I don't think you can solve using this method..
@@FluxAcademy good to know. thanks!
hey flux, I'd really like to be able to achieve this effect with light boxes, but for some reason the light boxes don’t seem to lay the same way that regular photos do, could you explain how to do this same exact thing, but make the photos clickable?
AWESOME
Great Video! Would this work with a multi image field from a collection item? :)
It seems like the downside of this hack is that you'll only get three columns when you have five items or more. Less than five items will result in two columns only.
Any workarounds?
In other words, the direction is from top to bottom and not from left to right, like it should be.
flexboxes inside grids i guess
Never even seen those bits.
Hi Ran! Love those videos. Do you know a simple way to create a slider from CMS content where I can show for example 3 elements and let the user slide through the rest using arrows? I have an idea for showcasing the products this way (separated by category, so dropping a few sliders one under another). Can we add some kind of animation also? I mean: if you scroll the page to the view, the items will slide from the side one after another? Pretty deep question but I guess it will take you a few minutes only to explain that, rather than a few hours to find the solution online or figure out myself ;)
I also want to do something similar to that too
Any way to make the images pulled from the CMS to mantain the Pinterest effect height wise?
Of course
BANG BANG BANG!
dam hax
To be honest quite a useless grid, as it looks ugly and as a designer you wont use it )
I HATE the pinterist grid with a passion. It is the worst thing ever designed when you are a person who appreciates visual order.
haha, hate is bad for your health kris.. just don't use it!
@@FluxAcademy hold on I gtg laugh..