CSS Grid Responsive Image Gallery Tutorial
Vložit
- čas přidán 29. 06. 2024
- In this CSS project video we'll be using the CSS grid to build a responsive image gallery that works on mobile & web. A few extra CSS tips and tricks sprinkled in. We'll be animating the gallery labels, using CSS grid to auto-setup our columns and rows, using CSS animations to animate our image labels and more!
📁 Project Files 📁
github.com/wilsmex/edu/tree/m...
📺 Related Videos 📺
➞ CSS Grid Tutorial: • CSS Grid Tutorial | Re...
💖 SUBSCRIBE (Please) 💖
czcams.com/users/FollowAndrew?s...
🚨 Cheap Professional Web Hosting 🚨
studentwebhosting.com
🙏 Become a Patron for support! 🙏
/ followandrew
🌐 Website 🌐
followandrew.dev
📢 Social Media 📢
TWITTER (@followandrewedu) ➞ / followandrewedu
#css #grid #imagegallery #responsive
I appreciate how you make very little assumptions about the viewer's knowledge while going through this. Also that you explain even the little things, like shorthand for creating all those divs. You're awesome!
Hey Andrew, I want to give you my thanks, this tutorial makes me definetly understand grid fully.
You won another sub! Greetings from Chile.
Thank you for a very informative and easy to understand video. I appreciate you explaining the simple reason for each of the lines and how they affect the end result. Thank you again!
Absoluteley amazing masterpiece, thank you very much fir sharing!
Excellent tutorial, not only a great coder but also a great teacher. I can’t understand why the views are not much higher. Thanks a lot
All my questions answered in one tutorial. Thank you Andrew. You have a new sub Sir!
Low-def, High-def, its all good! I liked the tutorial so much the first time around, I’ll just have to watch it again, lol... thanks Andrew!
Loved your explanation, very clear and brief. Good pace. Will recommend your channel!
One of the best explanation videos I have seen. Loved it and it worked perfectly, keep up the good work.
Thank you so much for the tutorial. You've explained this concept so well. I had a look at Google Chrome, and the grid overlays are under "layout", as well. Once again, thank you! 😊
you are awesome man !! some people say they will not explain and they don't but you explain as well nice work keep making more videos and keep explaining : )
Great tutorial. Clear and to the point on how to create a flexible image gallery using CSS Grid. As a side bonus, it shows how to methodically work through a real world project step by step. Thanks.
You have done great job! Perfect understanding video it is. Totally appreciate.
I appreciated to watch and learn with this tutorial. Clean explanation and beautiful voice. Thank you teacher!
Thanks so much, it really helped me. You take the time to explain and to show your code it's very helpful !! Nice of you. You didn't talk about order of placement of the pictures but it was already enough to help me.
Thank you for the tutorial Sir...One of the best Lectures on CZcams.👌
I just want to say that this tutorial is so well done. Thank you for explaining why things work the way they do. Your video is so well-paced and so thorough. It's really hard to find someone who actually teaches this well - great job and more than anything, thank you :)
Great tutorial, great teacher and ... great CSS (I can't imagine the amount of calculations and/or primitives used by the CSS core/engine !). Thank you very much from France, Andrew !
Thanks Philippe, Best!
Thank you! You sorta lost me when you were making the animations but I am so glad I didn't click off. Great tutorial! Keep up the awesome work!
Thank you so much! Your creation is awesome! :)
i am a beginner. Very well explained. I finally understand css grid. Thank you.
AWESOME JOB!!! YOU'RE A MASTER!!!
nice to be flexible with CSS! love it!
Wow Thank you so much for such an interesting tutorial!🙏🏻😍
Perfect video that helped me tremendously. I am now subscribing!
thank you so much you help me all for learning how to work with a grid layout
Man you explain things amazing! thank you !
Thank you. This is so good!
Realy well done, Great Video, thx.
Hi All, republished, this time without the 'demo mode' watermark!! :) (lame screen recording license issue on previous upload)
Here's the CSS Grid Crash Course Tutorial: czcams.com/video/SPFDLHNm5KQ/video.html
Great tutorial, thanks!
thank you for this king
Thank you so much for your time, Excellent video Bro (From Thailand :))
Hey Andrew,
just wanted to say thanks! :) I'm an absolute html/css beginner and have watched dozens of layout videos the last few days, but you are by far the best! You explain factual and yet its easy to follow you! TheCodingTrain vibes here!!!
Thanks and greetings from Berlin! peace
Awesome and thanks!
Very useful, thanks for the explanation.
"The best video about grid I've seen
Find this tutorial clearly explained..thanks man..!
Awesome!!! TQVM!!
Love this!
Excellent video, thank you for your time
Thank you for the tutorial.
WOahhh!!! This is perfect way to teach
In addition, nice trick with the "w-x" and "h-x" classes !
that is super helpful
Unfortunately I can give you only 1 thumb up. This is a high professional Tutorial and I learned a lot. I am very thankful. Uwe from Germany
Andrew you´re the best! Cheers from Argentina!
Muchas gracias!
This is all kinds of awesome. Thanks!
You bet!
Merci je comprend mieux css grid et je trouve cela super grâce a vous
its really awesome..well done sir
This grid tutorial makes me full understand about grid..
Note: every step u should pause & try urself.. Thus gonna make it easier. 😊
nice and clear explanation👌
Thank you very much!
Well done!
Excelent! I have suffer a lot because people publish theoretical info that doesn't always work out depending on what we really need to accomplished. You certainly explain what we face when try to do real work.
Thank you, thank you, thank you
Thanks Rafa, and you bet!
🤩Grazie
So good, thank you
you are a great teacher..thankyou very much..it helped a lot
You are welcome!
This is amazing
Awesome!!!! thanks
Hey bro! I love this tutorial and learned a lot from it. I was wondering if you would consider making a separate video explaining how to use your own images from your computer into Vscode? I'm struggling with this for some reason
This would have taken me a lot of trial and error blind CSS coding if it weren't for you. :) Thanks, much appreciated. Great video, and great explaining!
You bet! Glad you got it!
Thank you so much
Thank you bro)))) its Nice
This is by far the best gallery tutorial! Do you know how to make the text size responsive to the screen as well? The text size seems to stay at 25px no matter the screen size. Thanks!
Thanks!
Thank You
Hey Andrew.
Im implementing this layout of yours with a full enlargement of each item on hover/click. Im getting rid of animations although Im refreshing my practice on them. You are saving me tons of hours. Wheres your patreon? Thank you thank you thank you. You are star!!
nice, nice! i'm starting to get it now and understand the code (i could not _write_ it, mind you). the only thing i didn't like was the blur extended outside the image area a bit.another YT-er highlighted grid / flex grid don't solve all design problems. honestly, that was what i was looking for, like " just work and understand grid, and you can design anything", but that's not right.
awesome
Awesome Stuff! Simply Love this! Makes CSS-Grid look like a piece of cake!! One question though - would it be possible to set the classes like w-3, h-2 etc based on the image dimensions?
Yes that's possible
ths bro，good job.
Hello i really like the tutorial and your style of teaching. You should consider syncing your videos on LBRY (other platform than youtube) im sure they would love to have you.
thanks, your tutorial is very easy, i have 1 question, when i use w-2 and h-2 ? i don't understand it
kudos
hello sir. I love this tutorial and it helped me a lot. You made it very simple and easy to understand I very appreciate it. Thanku sir. Just waana say one thing that some of the tags doesnt worked the same as it does in your program code otherwise it was an awesome video
thanks
Thanks for the tutorial, I use the pics to finish the design. Because I can't use the api, can't get the images from the unsplash.
Amazing work! really awesome, just one question... is there a way to set the imgs to be opened in full view when clicked?
thanks for the great work!
Have you gotten the answer?
can you show us how you can move an image from a grid row to a grid column when the viewport is decreased from PC screen size to smartphone size (Does it have to be done by media query?)
Really excellent tutorial thank you very much. Can I ask could I add light box effect to the images?
Most light boxes are done with Javascript (although pure css boxes do exist), so it's a bit outside the scope of this tutorial
@@FollowAndrew Thanks for your reply. I have got it working with JS. I'm only trying to learn something and keeping brain active in lockdown. I'm 79 so no wish to take it a lot farther!
Grid-template-columns:repeat(6, 1fr) experiencing an expected RBRACE at line 105, col 35
I am still fairly new to learning css grids and have watched you'r previous video explaining how grids work and feel i have a good amount of understanding of it. But i am trying to create an image gallery as you have here and i am following along with your tutorial but i am not getting the same results, my images are still very large and using the object-fit: cover appears to not be doing anything. Any advice on what i may be doing wrong? Great videos by the way you have a great way of explaining things and making them easy to understand.
Could be the web browser, as object-fit is relatively new. Try a different browser to test maybe?
Hello Andrew. Great tutorial. however even if I follow step by step dreamwaver 20.2 what I see in my screen is not at all close to what you show in your screens. grid-template-colums: repeat(6,1fr) is red tagged by css dreamweaver. and the whole process does not work at all. is there a way around this?
Hi, great tutorial. But I would like to know what plugin do you use to preview the page in Visual Code ??? Thanks
Its probably Live Server. The page automatically refreshes when you save the HTML/CSS file in vscode.
A bit outdated but talking about backdrop-filter you can just replace it with adding filter: blur(5px) on .gallery-item:hover .image .img
Is there any way I can do this with updated fb posts? (for a blog)
the blur and fade out behind the text...how do I change it to just fit the text and exceed the borders of the container/img? its a cool idea but this way it looks like a code error, not a fan; I want it to just cover the background of the text and then feather the edges of it. Ai told me i need to add another div after the text div to create another layer, but this is upper level stuff.
is there a way to make this work with videos and images?
how do i pull local images without having to list them one by one?
whats the difference between grid-auto-rows and grid-template-row?
Auto rows property are part of the “implicit” grid, that is created based on any arbitrary amount of grid items. Template rows are part of the “explicit” grid for a defined set of rows
i dont know why but my grids are not working !!! please can someone help
Just a small talk dude:-
Why did u stopped making videos,your tutorials are quite awesome,
I know it can be daunting to making doZens of videos but still get really less view,but ya your content is great
More to come!
@@FollowAndrew brother can u please make a video about how to make a mobile first website
my design looks good on desktop but Quite bad on mobile
Pleaseeee help 🙂
when typing the attributes to request random images from unplash, it return nothing!! can you help please?
it is "unsplash" :)
it is "unsplash" :)
1000 photos will generate 1000 classes
Can i use this API from unsplash.com, or im gonna have copyright issues?
All Unsplash images are fully copyright free!
if only the images could autofit into the columns with their original dimensions...
he sounds and looks like steve jobs
Apparently, Code doesn't accept *grid-gap* anymore
OK, that was my fault
really well done. BUT.. the audio: room hummmmmmmm
Yeah, better mic noise suppression these days
@@FollowAndrew I think it really gives longevity to the work when the audio is attractive, crisp, quiet no room noise... sorry my inner audio engineer pokes it head often. But really, I have been enlightened by your vids. Thanks
algorithm