Learn CSS Grid the easy way
HTML-код
- Опубликовано: 2 июн 2024
- 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
✅ The GitHub repo: github.com/kevin-powell/learn...
✅ More videos on grid: • Getting started with C...
⌚ 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
Keep up to date with everything I'm up to
✉ www.kevinpowell.co/newsletter
Come hang out with me live every Monday on Twitch!
📺 / kevinpowellcss
---
Help support my channel
👨🎓 Get a course: www.kevinpowell.co/courses
👕 Buy a shirt: teespring.com/stores/making-t...
💖 Support me on Patreon: / 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 RUclips channel, make sure to follow me on Instagram and Twitter.
Twitter: / 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 awesome!
It was pointed out that at 11:47 I got things backwards! Declare those columns, only declare the rows when you need to!
I was gonna say that 🤣
Happens to the best of us, right?
I saw it too... but having followed you for some time now.... and having the same issues with things like left and right etc, I understood exactly what you were trying to say :D
You explain so well... Now I really understand grids!
i didnt notice !! very clear explanation
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
Yeah me too... I guess kevin can read minds
Haha same
Bro! Same🤣
I like turtles
I agree . Awesome
after two months of struggling i've found this 💯
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.
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!
I study webdev and he's a favorite among me and my classmates, he's addicting
Addictive is the correct word🙄👎
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!
I found your channel recently, and I've been loving your videos! Thanks for helping so many to understand CSS better! 💜
Thank you so much for providing the starting repo. Your teaching style is absolutely stellar!
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!
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.
Thanks Kevin! I was always declaring rows without actually needing them, learned a lot from this video
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!
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 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!
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 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.
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!
Just saw this vid. The grid-template-area are so life-changing. Thank you so much Kevs!
Can never have enough flex/grid content, thanks for sharing
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
I'm self learning html, css and js and your videos are superb. Thank you!
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
Best video I've watched to date about CSS Grid. Thanks for claring things up!
I always come back to this video when I need a quick refresher on css grid. Thanks Kevin!
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.
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.
It's incredible that this is free content. Thanks Kevin, helped me understand grids finally!
Thank you! I've struggled with CSS Grid and I always use flexbox instead. Your explanation was so clear and engaging. Love the channel! 👍
I was always struggling using grid for more complex layouts but after watching your video everything becomes so easy!
What a lesson! Amazing how simple this is. Thank you for sharing!
Absolutely exhaustive and thorough explanation, what a magic!
Wow, so much I have learned in this short video! I really enjoyed it! Thank you very much, Kevin!
I just really started learning grid, so this video is awesome to really get the info needed to get into it.
Thank you!
This is brilliant. Thank you so much i will be rewatching when i can follow along. Had a project yesterday where i needed grid and now i have a much better understanding of it. ❤
Your awesome explanations and rough sketch of the grid system has did a great magic for me in understanding CSS grid... The use of grid-area makes the whole process easier... This is Gem
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!
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!
Thank you for existing! I discovered your channel quite recently, and your calm, informative and accessible tutorials have helped me finally get to grips with responsive design and so much more!
what's showing in your comment ?
@@rajeshsingh-mv7zn donation
Thank you so much (and sorry for missing this until now!)
The explanations were so well-put that I didn't even realize the video was 37 minutes long until I finished it lol
And It was super insightful to see the thought process behind when to use and when not to use certain properties!
Kevin your technique really sheds light on how to use the grid, many thanks for this detailed explanation!
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!
Thank you very much, you have synthesized very well what is necessary to apply css grid in our layouts, your content is gold!
This is so good. I've always used flexbox because I could never wrap my brain around grid. I completely get it now. Absolutely converted. Thank you so much for this.
one of the best grid video examples ive seen yet. It fits perfect for something like testimonials
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.
I was also completing the Front End Mentor Challenge and it is a great coincidence that you help me solve the same problem. That is why I appreciate you, Kevin.
Great video as always KP. Have been enjoying your other grid videos and this is the icing on the cake. I'm already dividing said cake into template areas in my head. This channel and Jen's layout land has been so helpful for learning grid (plus all the other stuff you cover is brilliant too).
PS. As a suggestion, I wondered if you have considered taking line numbers, side toolbar, code zoom etc. off your editor, just to give a little more room when coding alongside a layout on a video.
Every other people shows one way to do things and say "there are other ways to do the same thing but I'm not going into that now", but Kevin takes time and shows almost all the possible ways, which makes him different than others and that's I like your tutorials and I never get bored watching.
@Kevin Powell. I want to say thank you Kevin for the easy grid layout instruction tutorial. Please make a video like this for the sub-grid as well so that we can grasp the concept of sub-grid easily.
I couldn't figure out what to watch on Netflix while having a break from learning layout stuff, then I saw this recommended on RUclips. My brain thanks you for making learning this feel like it was still a break.
You are a damn wizard.
Probably the best video I’ve ever seen of grid layout! Thanks man ❤️
Even though it's a relatively long video, I finished it without skipping any part!! Thank you Kevin for this informative video!
Glad it was helpful!
way short for grid really that shit is so complex but well organized
@@KevinPowell Man I just wanted to see the end result but I watched it till the end.
Wow, well done Kevin. I'm still a newbie and trying to learn as much as I can by navigating the web for additional content while i do my bootcamp. You are the best, had to subscribe to learn more 👌
Had to leave a thank you here! Haven’t been following the development of CSS for a long time and always wondered the fascination of grid. Now I know!
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!!!!!!
Man, this helped a lot as someone learning from scratch. Realized i was struggling to wrangle flex box to do stuff i should have used grid for. Thanks!
Been enjoying your videos. Easy to follow and understand and the fog of not knowing is being lifted. Thanks!
This is just the best of all grid tutorials I've had so far. Mean it.
You are the CSS noob whisperer.
I have been learning on my own, struggling with CSS layouts until I came across a random reddit thread recommending your channel. What a gift of fate! Thank you for your content!
This is the best tutorial for grid. One stop video. Thanks Kevin 😊.
Worth watching, thanks @Kevin Powell.
Man! I'm so glad I found your channel. You're videos are great! Thank you and keep up the good work.
Thank you very much. This video was much better and clearer than the others ’ lessons.
Starting to use grid. This has been very helpful. I say a couple other video's but you cover what/why is simple terms very good.
Super clear and easy to follow, thanks as always for the awesome tutorials.
Such a great Video! I've struggled so long with grid and now i'm starting to get it! Thank You so much :)
I spent a whole day learning and memorizing. thank u so much your lessons are valuable and appreciated. we love u, sir.
I'm just so glad I have invested in Kevin's amazing courses. Thank you sir!
Out of no where, you delivered me from the hell.
The best css grid tuto ever
Really great explanation of CSS grid, Kevin! Thank you ❤️
absolutely loved it!! thanks for sharing with us
Thanks for covering all bases in terms of responsiveness, shorthand, overwriting potential, and so on.
Very informative and easy to follow along. Thanks for being so clear with the tutorial!
this is one of the best tutorials i've ever seen on youtube. thank you soooo much.
What an amazing tutorial. Have never felt more like I know how to control the grid system. The tutorial makes it so clear that I felt stupid for not understanding before.
Thank you so much Kevin. You helped me a lot with understanding the weird parts of grid. You are the best!!!
I finally understand CSS Grid and i love it - thank you Kevin Powerll.
Love the way you explain it! Great job!
Amazing tutorial. Youre the best, Kev!
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:)
I was just thinking of re-learning CSS grid. Perfect timing.
Lol I've been binge watching all of your grid videos the past couple days. Such a huge pleasant surpise! Ty ty
Kevin that video is really helpful! Your explanation is so clean. Best css youtuber. Thank you
Best video about display grid on the internet. Thank you very much for this exceptional content!
Your videos are so helpful. I've been doing CSS since its inception and I'm always learning something new :)
I have been struggling with this. OMG you made it so simple. I'm adding your videos to my studying!
Hi Kevin,
Loved the way made me learn CSS Grid. Never viewed such a simple & easy way.
This is awesome, crystal clear introduction, thanks kevin
Thanks alot Kevin! It's amazing as always. I use Pinegrow to learn or build things visually, and its actually focused on using the grid-template-area approach which made it very easy.
Magnificent presentation of this material. Thank you.
Wow, I really never was a big fan of grid, found it way to complex, always went back to flex box, but this video really made it pop for me. Great job!
Great to hear and happy that you liked it!
Thank you so much.
I generally stayed away from grid because it seemed too daunting.
But your explanation really helped me :)
Glad it helped!
You DEFINITELY have the best CSS tuts in the world! :)
EDIT:
You also have a really comfortable and relaxing personality that makes it easier to follow along. Your videos are not too slow and not too fast. As a tutor (and person) I will give you 10/10.
give him an 19/10
You made this way more easier to understand for me, thank you so much!
I was totally confused about declaring the grid-template-column & grid-template-row property.... this really really helped me thank's a lot sir :)
Hi Kevin, thank you for all your videos. You're a great teacher. And i'm learning so much from you. Ps: When not sure if its horizontal or vertical, just think of the horizon in the distance.
Watching RUclips videos really do make you learn something that you didn't even intend on learning. Before, I thought you were not able to have two classes in one element. As I watched more of Kevin Powell and Web Dev simplified, I notice that they have a very LONG class names and I thought it was because they were using some kind of extensions in order for them to do that, but I looked it up recently and....you CAN add more than one classes in an element by using space as the indicator. A very beginner mistake you could say, but I am very glad I learned that early on.
Thank you for the tutorial, I've been avoiding Grid because it seemed a lot more complicated than Flex, but your tutorial is very approachable and useful use cases for grid.
Amazing video Kevin. Thanks so much!
Great video! Such a good explanation at all different levels of abstraction, superbly done.