CSS Grid Intro and Basic Layout Tutorial for Beginners

THANK YOU SO MUCH! YOU THOUGHT ME BETTER THAN MY COLLEGE PROFESSOR!!!!

I admit that this chapter is at an advanced level, but in the end I'm satisfied.
It's a titanic piece of work on your part.
Thank you so much.

Thank you Dave

Thank you Dave Gray for saving the day and making this easy to understand!

Thank you for this incredible content!

How can we make the final grid layout that was shown in the tutorial responsive for mobile screen size??

A really great way of teaching , thank's Dave !

perfect pace thank you

Unironically got stuck for an hour on the grid-auto-rows setting because I putcommas between the values. Anyone learning a programming language in tandem with CSS will probably run into this sooner or later. Markup language (*ML) doesn't use commas like that...

So far, grid feels harder than flex so I'll be playing in the garden for a while ;)

I'm really enjoying the "Microsoft Edge Tools for VS Code" extension. You're going to get a similar split-screen as Dave has. It takes a little getting used to - you're going to be typing in the dev tools directly instead of the CSS file to take maximum advantage but then you can see what all the options do immediately as you scroll through the list of options without even saving. Your choices will be saved in the CSS if you agree. Using that with this tutorial has been pretty amazing.

Using the "Live Server" extension will, imo, still be the best option for testing responsive sites since you'll have the option to drag the sides of the screen to your preferred sizes and instantaneously see how your site changes versus having to type in the viewport sizes in the Edge extension where it becomes a lot less organic / pretty.

This is NOT a beginner's tutorial. Put yourself in the shoes of someone who knows nothing about this topic. You jumped into new selectors then barely explained them. Next....

Good tutorial as always Dave but man does css grid suck compared to flexbox.

Thanks, Dave. Another excellent tutorial again. Thumbs up!

THANKS FROM BANGLADESH.

Liking your videos before watching them, Dave.

Thank you!

You're a lifesaver, Sir... Thank you

thankyou dave !.
your tutorial so good, When I watched this tutorial, I thought about creating a gallery with a grid for my first website :>

I never really comment but your videos are really helpful .. you just make everything easier fo understand thank you soo much for you hard work ..

Great introduction to such a powerful tool. Thanks a lot Dave!

thanks to dave for more enlightenment i'd read pdf but most times it's kinda look weird and hard . but whenever i switch to your tutorial it's always interesting

I love your discussions sir and I will be spending my Web Development learning journey here. thanks

Why, oh why have I only just found your channel????? Just love your no-nonsense style of teaching!!!

You sir! are God-sent. Your tutorials gives me so much clarity. Thanks to you, I can use flex and grid now.

I just discovered your videos and wow, I'm glad I did!! The way you explain everything makes the content much easier to understand than f.x. reading an article. Thanks so much, this is really appreciated!

What is the difference between min-height and height alone sir?

I saw your HTML & CSS tutorials. They were amazing! Also, played the grid garden and flexbox froggy games. (so funny and useful) What do you recommend to do to practice these two languages ​​and before moving on to JS? Thanks Dave!

Great tutorials. should I use native CSS, or should I use bootstraps or something new called tailwind?

Hi Dave, I was just wondering that maybe at the end of tutorials like this, we get some sort of "active" usage on an actual webpage/website of the property in question, just to "visualize?" the property we're learning in what it could be used to create.

I don't know, something around those lines...

Wow! Gray, you've re-inflated my love for CSS Grid. Thank you very much.

Hi Dave
This video was great, the way you explained everything made it very easy to understand and follow. Thanks for the hard work you put into these vids for your subs 🤙🤙🤙

Can't wait till Grid Garden updates for Subgrid 🥕

Using template area is my favorite way to plan the main layout of the page (if required) where it's very simple to manipulate to respond to different screen sizes and orientations,

I think the vertical scrollbar was activated because of the container min value specified in grid-auto-rows: minmax(150px, auto), using auto can fix it to some extent,
or, maybe we can set the body height to 100vh, then add overflow: scroll to the main,
it's ugly and unusual I know but possible,

BTW, in the video description there is a semi-colon in the time of chapter "Experimenting with layout properties",

Thanks Dave, that was a great video as usual,

Hi Dave, Loving your CSS series.
Can you tell when do you plan to complete CSS?

Dave wish you good luck! Don't get tired of working! Can you teach me React js if you can?

Hi Dave! Glad to see that your chanel is progressing