Learn CSS Grid the easy way
891,474
Published 2021-11-25
🔗 Links
✅ The GitHub repo: github.com/kevin-powell/learn-grid-the-easy-way
✅ More videos on grid: • Getting started with CSS Grid
⌚ 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
💬 discord.gg/nTYCvrK
Keep up to date with everything I'm up to
✉ www.kevinpowell.co/newsletter
Come hang out with me live every Monday on Twitch!
📺 www.twitch.tv/kevinpowellcss
---
Help support my channel
👨🎓 Get a course: www.kevinpowell.co/courses
👕 Buy a shirt: teespring.com/stores/making-t...
💖 Support me on Patreon: www.patreon.com/kevinpowell
---
My editor: VS Code - code.visualstudio.com/
---
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.
Twitter: twitter.com/KevinJPowell
Codepen: codepen.io/kevinpowell/
Github: github.com/kevin-powell
---
And whatever you do, don't forget to keep on making your corner of the internet just a little bit more a
All Comments (21)
-
It was pointed out that at 11:47 I got things backwards! Declare those columns, only declare the rows when you need to!
-
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
-
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!
-
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!
-
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.
-
This is the definition of a humble flex. He's showing off his testimonials whilst teaching us priceless information. He's a good man, this Kevin.
-
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!
-
Have just finished teaching an undergraduate introduction to HTML and CSS. Grid areas is such an easy way to create a responsive layout. Then with a couple of lines of code you have a flexbox based responsive navigation bar. Gone are the days of tables within tables! Thanks for the video.
-
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! 😊
-
I found your channel recently, and I've been loving your videos! Thanks for helping so many to understand CSS better! 💜
-
I always used to avoid grid due to it's complexity but now i can use it in my projects , you made things really simplest ❤️ Thx for this video.
-
Thank you so much for providing the starting repo. Your teaching style is absolutely stellar!
-
I hit an absolute wall trying to comprehend grids on the freecodecamp course and you explained this in a way that I instantly got it. Thank you 100 million times!!!!!!
-
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!
-
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.
-
I've been a developer for a really long time. I've always focused on the engineering side. Never paid much attention to CSS and left for designers or out sourced for it be completed. So watching this is really interesting to get a better understanding of how easy it can be to position things using grid. I don't really know the difference between flex and grid yet, but this seems like a very simple way of getting things done quickly for minimal effort. Great video.
-
The best video on how to start using CSS grid I have had the pleasure to lay my eyeballs on. Bar none. If you don't get grid after watching this video, then...you're probably a dolphin.
-
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!
-
Thanks Kevin! I was always declaring rows without actually needing them, learned a lot from this video
-
33:04 "and i'll set this up really fast" -this, Kevin, is why I simply love your each and every tutorial. because you're so thoughtful! i mean, the fact that you're thinking also about HOW we're going to consume your content, not only about WHAT you're giving us, while teaching, is amazing. thank you so much, i found you thru The Odin Project and i feel lucky that i started to build the first steps by looking at your videos:)
