CSS Grid Intro and Basic Layout Tutorial for Beginners

In this CSS Grid intro and basic layout tutorial for beginners, you will learn the CSS grid properties frequently used in constructing grid layouts. You will also create a basic layout with CSS grid.

🚀 This lesson is part of a CSS for Beginners tutorial series playlist:

CSS Grid Intro and Basic Layout Tutorial for Beginners

(00:00) Intro
(00:05) Welcome
(00:26) Setup & Starter Code Review
(01:48) Quickest way to apply a grid
(02:32) grid-template-columns
(05:28) grid-auto-rows
(07:01) grid-template-rows, grid-auto-columns
(07:27) row-gap, column-gap, gap
(08:36) grid-column-start & end, grid-row-start & end
(10:49) Viewing your grid in dev tools
(12:19) grid-column, grid-row shorthand
(14:14) align-content, justify-content, place-content
(16:00) Adding HTML for grid-template-areas
(17:49) grid-template-areas, grid-area
(22:14) Experimenting with layout properties
(24:53) CSS Grid Garden

🕹️ Learning Games:

⚙ Web Dev Tools:

📚 References:

📚 Typography Resources:

📚 Color Resources:

✅ Follow Me:

Was this tutorial about CSS Grid Layouts for Beginners helpful? If so, please share. Let me know your thoughts in the comments.

#css #grid #layout

[VanPetersonKpoti]

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.

[medleminabdouli]

thank you a ton!
Finally, this is the only lecture from you (my pivotal teacher) that I could not comprehend. It's highly complicated!!! I tried many times but it didn't work out!
Anyway thank You've been very helpful for me and my friends too.

[KeithGardner-ku]

Dave this was outstanding; you're an excellent teacher.

[Duelweb]

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

[NedumEze]

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

[danielglaser]

Doing a better tutorial is an impossible mission. Thank you so much.

[emmanoel]

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

[annarubin]

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!

[gxvencio]

grid layout is great, thank's teacher Dave, without use grid layout to make space, the content stay out of place

[robinheyer]

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.

[CTILET]

Hi Dave! Glad to see that your chanel is progressing

[kensleylewis]

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

[damil_grandeur]

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

[garikmelqonyan]

Liking your videos before watching them, Dave.

[aryaprima]

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

[serabella]

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 ..

[GabrielSouza-yyrq]

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

[pauwebcreationfreelancer]

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

[PatrickBateman_speaks]

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

[ChristiaanKoppelaar]

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