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!
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: ua-cam.com/video/SPFDLHNm5KQ/v-deo.html
Find this tutorial clearly explained..thanks man..!
4 роки тому
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
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
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! 😊
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 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.
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 !
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 :)
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!
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 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.
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!
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.
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!!
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 was what i was looking for. However, the text code did not work nor did the transitions etc. Not that is a deal breaker, I was just wondering why? I used it all in several browsers, Chrome, edge, FFox.
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.
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.
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
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?
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?)
This is awesome! I'm currently trying to learn to create a grid that displays like this with automation. In React, I'm sending an API Request and using .map() to render the response items, so I can't give each item its own unique style. It's discouraging haha
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
@@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 🙂
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?
@@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!
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.
@@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
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!
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: ua-cam.com/video/SPFDLHNm5KQ/v-deo.html
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
This grid tutorial makes me full understand about grid..
Note: every step u should pause & try urself.. Thus gonna make it easier. 😊
In addition, nice trick with the "w-x" and "h-x" classes !
that is super helpful
One of the best explanation videos I have seen. Loved it and it worked perfectly, keep up the good work.
i am a beginner. Very well explained. I finally understand css grid. Thank you.
Find this tutorial clearly explained..thanks man..!
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!
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!
Andrew you´re the best! Cheers from Argentina!
Muchas gracias!
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!
"The best video about grid I've seen
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! 😊
Merci je comprend mieux css grid et je trouve cela super grâce a vous
Hey Andrew, I want to give you my thanks, this tutorial makes me definetly understand grid fully.
You won another sub! Greetings from Chile.
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!
I appreciated to watch and learn with this tutorial. Clean explanation and beautiful voice. Thank you teacher!
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
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 : )
Absoluteley amazing masterpiece, thank you very much fir sharing!
All my questions answered in one tutorial. Thank you Andrew. You have a new sub Sir!
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.
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!
Very useful, thanks for the explanation.
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 :)
Loved your explanation, very clear and brief. Good pace. Will recommend your channel!
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!
WOahhh!!! This is perfect way to teach
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!
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
Realy well done, Great Video, thx.
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.
You have done great job! Perfect understanding video it is. Totally appreciate.
Perfect video that helped me tremendously. I am now subscribing!
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 very much!
thank you so much you help me all for learning how to work with a grid layout
thanks, your tutorial is very easy, i have 1 question, when i use w-2 and h-2 ? i don't understand it
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!
Great tutorial, thanks!
thank you for this king
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.
Grid-template-columns:repeat(6, 1fr) experiencing an expected RBRACE at line 105, col 35
Thank you for the tutorial Sir...One of the best Lectures on UA-cam.👌
Thank you for the tutorial.
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!!
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
AWESOME JOB!!! YOU'RE A MASTER!!!
nice to be flexible with CSS! love it!
This was what i was looking for. However, the text code did not work nor did the transitions etc. Not that is a deal breaker, I was just wondering why? I used it all in several browsers, Chrome, edge, FFox.
Thank you so much for your time, Excellent video Bro (From Thailand :))
Man you explain things amazing! thank you !
Wow Thank you so much for such an interesting tutorial!🙏🏻😍
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.
Well done!
you are a great teacher..thankyou very much..it helped a lot
You are welcome!
A bit outdated but talking about backdrop-filter you can just replace it with adding filter: blur(5px) on .gallery-item:hover .image .img
Thank you so much! Your creation is awesome! :)
Excellent video, thank you for your time
Awesome!!! TQVM!!
Love this!
🤩Grazie
its really awesome..well done sir
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.
how do i pull local images without having to list them one by one?
Thank you so much
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
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
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?)
Thank You
Thanks!
This is all kinds of awesome. Thanks!
You bet!
is there a way to make this work with videos and images?
This is awesome! I'm currently trying to learn to create a grid that displays like this with automation. In React, I'm sending an API Request and using .map() to render the response items, so I can't give each item its own unique style. It's discouraging haha
you can create JS script to give additional classes depending on width devided by height proportion
Thank you. This is so good!
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 🙂
i dont know why but my grids are not working !!! please can someone help
thanks
code from the github repo does not work..
ths bro，good job.
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?
So good, thank you
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!
awesome
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?
This is amazing
Thank you bro)))) its Nice
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?
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.
Can i use this API from unsplash.com, or im gonna have copyright issues?
All Unsplash images are fully copyright free!
Awesome!!!! thanks
kudos
Is there any way I can do this with updated fb posts? (for a blog)
when typing the attributes to request random images from unplash, it return nothing!! can you help please?
it is "unsplash" :)
it is "unsplash" :)
if only the images could autofit into the columns with their original dimensions...
1000 photos will generate 1000 classes
Apparently, Code doesn't accept *grid-gap* anymore
OK, that was my fault
he sounds and looks like steve jobs
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