Learn CSS Grid the easy way

It can be easy to get bogged down in how grid works, with a lot of new properties, values, and even units! So let's try and simplify things as much as possible, because to get started, you don't need to know *everything* about how Grid works.

🔗 Links

⌚ Timestamps
00:00 - Introduction
01:01 - How we're approaching this
02:01 - What we are working on
02:39 - What we are starting with
03:08 - Declaring display grid
03:59 - The gap property
04:47 - Use your grid inspector
06:06 - How many columns do you need
06:59 - You probably don't need to declare rows
12:48 - Spanning columns
15:09 - Placing things in specific places on your grid
17:52 - Working with line numbers
24:56 - Working with media queries
28:21 - grid-template-areas
35:38 - auto-columns and rows

#css

--

Come hang out with other dev's in my Discord Community

Keep up to date with everything I'm up to

Come hang out with me live every Monday on Twitch!

---

Help support my channel

---

---

I'm on some other places on the internet too!

If you'd like a behind the scenes and previews of what's coming up on my YouTube channel, make sure to follow me on Instagram and Twitter.

---

And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!

[KevinPowell]

It was pointed out that at 11:47 I got things backwards! Declare those columns, only declare the rows when you need to!

[ZattalovOffishal]

I swear that i was googling “css grid” to understand that thing, i went to youtube to dive more, suddenly I found you just uploading this video… MAGIC, i love you teacher

[davidmyersdev]

I found your channel recently, and I've been loving your videos! Thanks for helping so many to understand CSS better! 💜

[MauFerrusca]

Thank you so much for providing the starting repo. Your teaching style is absolutely stellar!

[crason]

This video was fantastic! And your naming convention is not only awesome, easy to remember, when you consider what Tailwind is doing, this makes it even easier!

[JennyZibreva]

Kevin you're one of the best CSS-teachers out there! Such an awesome teaching style and great content!
Can't wait to learn more with you, keep up great work 🙂 Cheers!

[uLone]

This was such a good tutorial! I normally work in the backend and I've had nothing but stress when working with CSS lately. So it's nice to find someone who makes front end developing just as fun as backend!

[Humpfinger]

Honestly, your style of teaching has grown to such an incredible level. Even video’s as early as a year ago are nothing compared to the way you make your video’s now. Unique, nice to watch, and very clear. Mad probs to you Kevin!

[TOMA]

Great stuff man, learning a lot from you, I'm a big fan of CSS in general but this grid thing is just phenomenal. Thanks for all great tutorials.

[GabrielSouza-yyrq]

This class was very enlightening. And your tip about setting the grid-auto-columns property was something special. Thank you very much. Greetings from Brazil

[jpfaustino]

I'm just beginning to learn CSS and found your video. Your videos are clear, and your tone is engaging. Imma watch all your videos soon. Thank you for this!

[LuisReyes-zsuk]

Kevin, your content is probably the only technical content I will watch for "leisure", when I'm eating or just chilling, taking a break. Favorite channel 🔥 Appreciate you!

[beaverplugins]

Best video I've watched to date about CSS Grid. Thanks for claring things up!

[UweKempf]

Kevin, Thank you for the great video. It’s easy to find “how“ explanations on the internet. But you very often give me the “why and why not use this feature“. That makes you my go to channel for CSS 🤩
Keep on your excellent work! 😊

[ericsmith]

Wow Kevin! You have a natural gift for teaching. I’ve been working in the software biz for over 10 years and ingest a ton of videos and blogs. You are hands down one of my favs!

[TheSoulCrisis]

This video on Grid is amazing, your Flex ones are awesome too!! Loving this to bits, diving deep into these rich feature sets and need lots of practice!

[kagune]

This is amazing. I just started studying HTML and CSS on my own a few days back and doing layouts was insanely confusing. After watching this video I swear I’ve been able to get beautiful layouts!

I’ll definitely check more of your videos, keep up the great work.

[rin]

Omg, you're explaining everything so well! I struggled to understand how the grid works but after your video, everything falls into place. Thank you, Kevin!

[rolandoriley]

Just an excellent explanation to get started with Grid. There are so many details on this lesson that is worth to take your time when following along with Kevin

[eddiemilla]

Thanks Kevin! I was always declaring rows without actually needing them, learned a lot from this video