Learn CSS Grid the easy way

  Переглядів 859,915

Kevin Powell

Kevin Powell

День тому

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 UKposts 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!

КОМЕНТАРІ: 772
@KevinPowell
@KevinPowell 2 роки тому
It was pointed out that at 11:47 I got things backwards! Declare those columns, only declare the rows when you need to!
@AmmarOuds
@AmmarOuds 2 роки тому
I was gonna say that 🤣
@BlockCylinder
@BlockCylinder 2 роки тому
Happens to the best of us, right?
@TheElkster
@TheElkster 2 роки тому
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
@janquieldapper
@janquieldapper 2 роки тому
You explain so well... Now I really understand grids!
@alilemo2134
@alilemo2134 2 роки тому
i didnt notice !! very clear explanation
@ZattalovOffishal
@ZattalovOffishal 2 роки тому
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
@shaderone07
@shaderone07 2 роки тому
Yeah me too... I guess kevin can read minds
@ngoako
@ngoako 2 роки тому
Haha same
@mattifresh
@mattifresh 2 роки тому
Bro! Same🤣
@Cognitoman
@Cognitoman Рік тому
I like turtles
@TulsiCurryWorld
@TulsiCurryWorld Рік тому
I agree . Awesome
@kbCorruption
@kbCorruption 21 годину тому
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!
@Humpfinger
@Humpfinger 2 роки тому
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!
@k1mpman
@k1mpman 2 роки тому
I study webdev and he's a favorite among me and my classmates, he's addicting
@johnryder8464
@johnryder8464 2 місяці тому
Addictive is the correct word🙄👎
@fakeitsoyoumakeit
@fakeitsoyoumakeit День тому
after two months of struggling i've found this 💯
@secretskpg
@secretskpg 5 днів тому
Hello Kevin, While this is one of the few comments I've ever made on UKposts, your channel has compelled me to express my gratitude. I am transitioning into software development with a focus initially on back-end processes, viewing them as more aligned with my logical mindset. However, your insightful explanations have piqued my interest in front-end development. I now appreciate the significant logical components involved in HTML and CSS. Thank you for the enlightening content; it's invaluable to have access to such informative resources as I explore this field. I feel extremely grateful!
@DollarEggNog
@DollarEggNog 2 місяці тому
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.
@kassimbabika
@kassimbabika Рік тому
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.
@ericsmith3127
@ericsmith3127 2 роки тому
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!
@davidmyersdev
@davidmyersdev 2 роки тому
I found your channel recently, and I've been loving your videos! Thanks for helping so many to understand CSS better! 💜
@aniekansamson-xw5dj
@aniekansamson-xw5dj 12 днів тому
Man i have fallen in love with css because of you i watched a single video and i knew you are the best ever, thank you, thank you thank you from Nigeria God bless you Man
@uLone
@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!
@eddiemilla6983
@eddiemilla6983 2 роки тому
Thanks Kevin! I was always declaring rows without actually needing them, learned a lot from this video
@JennyZibreva
@JennyZibreva 2 роки тому
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!
@MauFerrusca
@MauFerrusca 2 роки тому
Thank you so much for providing the starting repo. Your teaching style is absolutely stellar!
@Harlem1991
@Harlem1991 2 роки тому
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.
@xClown55
@xClown55 2 роки тому
Can never have enough flex/grid content, thanks for sharing
@kagune6585
@kagune6585 2 роки тому
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.
@crason8
@crason8 Рік тому
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!
@TOMA21207
@TOMA21207 2 роки тому
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.
@UweKempf
@UweKempf 2 роки тому
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! 😊
@spydergs07
@spydergs07 2 роки тому
I just really started learning grid, so this video is awesome to really get the info needed to get into it. Thank you!
@TheSoulCrisis
@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!
@dixienormus8097
@dixienormus8097 2 роки тому
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.
@dannyyang9181
@dannyyang9181 Рік тому
I always come back to this video when I need a quick refresher on css grid. Thanks Kevin!
@mitzycraft
@mitzycraft 2 роки тому
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!!!!!!
@nielsvandervelden3063
@nielsvandervelden3063 Рік тому
I was always struggling using grid for more complex layouts but after watching your video everything becomes so easy!
@sprtlife6261
@sprtlife6261 2 роки тому
It's incredible that this is free content. Thanks Kevin, helped me understand grids finally!
@johnpaulpineda2476
@johnpaulpineda2476 2 роки тому
Just saw this vid. The grid-template-area are so life-changing. Thank you so much Kevs!
@MatthewWeiler1984
@MatthewWeiler1984 2 роки тому
Thank you so much. I generally stayed away from grid because it seemed too daunting. But your explanation really helped me :)
@KevinPowell
@KevinPowell 2 роки тому
Glad it helped!
@GabrielSouza-yy2rq
@GabrielSouza-yy2rq Рік тому
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
@jpfaustino3269
@jpfaustino3269 5 місяців тому
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!
@bishwajeetpandey1570
@bishwajeetpandey1570 2 роки тому
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.
@rolandoriley
@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
@raftguy1376
@raftguy1376 Рік тому
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!
@beaverplugins3851
@beaverplugins3851 2 роки тому
Best video I've watched to date about CSS Grid. Thanks for claring things up!
@gsonego
@gsonego 7 місяців тому
What a lesson! Amazing how simple this is. Thank you for sharing!
@scoworthyuan
@scoworthyuan Рік тому
Kevin your technique really sheds light on how to use the grid, many thanks for this detailed explanation!
@_tanzil_
@_tanzil_ Рік тому
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.
@The-Sentinel
@The-Sentinel Рік тому
one of the best grid video examples ive seen yet. It fits perfect for something like testimonials
@in91gaming15
@in91gaming15 2 роки тому
Probably the best video I’ve ever seen of grid layout! Thanks man ❤️
@esagecantu
@esagecantu Рік тому
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.
@terrol3164
@terrol3164 2 роки тому
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!
@bushigi5913
@bushigi5913 2 роки тому
Even though it's a relatively long video, I finished it without skipping any part!! Thank you Kevin for this informative video!
@KevinPowell
@KevinPowell 2 роки тому
Glad it was helpful!
@imnemo2327
@imnemo2327 2 роки тому
way short for grid really that shit is so complex but well organized
@Baff0000
@Baff0000 2 роки тому
@@KevinPowell Man I just wanted to see the end result but I watched it till the end.
@ChristopherGoldenTHOF
@ChristopherGoldenTHOF 11 місяців тому
Thank you! I've struggled with CSS Grid and I always use flexbox instead. Your explanation was so clear and engaging. Love the channel! 👍
@jornzander1285
@jornzander1285 2 роки тому
This is just the best of all grid tutorials I've had so far. Mean it.
@chantalwiebe534
@chantalwiebe534 2 роки тому
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.
@dannyfoo
@dannyfoo 2 роки тому
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!
@phillipmeredith6101
@phillipmeredith6101 Рік тому
Man! I'm so glad I found your channel. You're videos are great! Thank you and keep up the good work.
@MarsIfeanyi
@MarsIfeanyi Рік тому
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
@DioD3
@DioD3 Рік тому
I'm self learning html, css and js and your videos are superb. Thank you!
@hqprivat
@hqprivat 5 місяців тому
Wow, so much I have learned in this short video! I really enjoyed it! Thank you very much, Kevin!
@mellowmarvin
@mellowmarvin 2 роки тому
Such a great Video! I've struggled so long with grid and now i'm starting to get it! Thank You so much :)
@Alex.Shalda
@Alex.Shalda 11 місяців тому
Absolutely exhaustive and thorough explanation, what a magic!
@tayl5960
@tayl5960 2 роки тому
I couldn't figure out what to watch on Netflix while having a break from learning layout stuff, then I saw this recommended on UKposts. My brain thanks you for making learning this feel like it was still a break. You are a damn wizard.
@michaelm8044
@michaelm8044 Рік тому
Thanks for covering all bases in terms of responsiveness, shorthand, overwriting potential, and so on.
@rin4961
@rin4961 Рік тому
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!
@nickperkins1911
@nickperkins1911 Рік тому
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!
@rajeshsingh-mv7zn
@rajeshsingh-mv7zn Рік тому
what's showing in your comment ?
@vdjayaram5053
@vdjayaram5053 Рік тому
@@rajeshsingh-mv7zn donation
@KevinPowell
@KevinPowell Рік тому
Thank you so much (and sorry for missing this until now!)
@chill70730
@chill70730 2 роки тому
You made this way more easier to understand for me, thank you so much!
@LuisReyes-zs4uk
@LuisReyes-zs4uk 2 роки тому
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!
@ngoako
@ngoako 2 роки тому
I was just thinking of re-learning CSS grid. Perfect timing.
@abbosshomurodov8964
@abbosshomurodov8964 2 роки тому
Thank you so much Kevin. You helped me a lot with understanding the weird parts of grid. You are the best!!!
@glynislily
@glynislily 2 місяці тому
I have been struggling with this. OMG you made it so simple. I'm adding your videos to my studying!
@mikeshaw4610
@mikeshaw4610 4 місяці тому
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.
@jgvlc
@jgvlc Рік тому
Thank you very much, you have synthesized very well what is necessary to apply css grid in our layouts, your content is gold!
@fabianpetersen2452
@fabianpetersen2452 2 роки тому
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 👌
@0-Will-0
@0-Will-0 2 роки тому
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).
@0-Will-0
@0-Will-0 2 роки тому
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.
@e.m.janssen3638
@e.m.janssen3638 Рік тому
Super clear and easy to follow, thanks as always for the awesome tutorials.
@jisrite
@jisrite 2 роки тому
Watching UKposts 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.
@jasoncabreros
@jasoncabreros 6 місяців тому
Been enjoying your videos. Easy to follow and understand and the fog of not knowing is being lifted. Thanks!
@atomz520
@atomz520 Рік тому
Very informative and easy to follow along. Thanks for being so clear with the tutorial!
@nurullohubaydullayev5413
@nurullohubaydullayev5413 2 роки тому
Thank you very much. This video was much better and clearer than the others ’ lessons.
@Karaz608
@Karaz608 2 роки тому
I spent a whole day learning and memorizing. thank u so much your lessons are valuable and appreciated. we love u, sir.
@flaminggasolineinthedarkne4
@flaminggasolineinthedarkne4 2 роки тому
@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.
@Sorcy
@Sorcy 2 роки тому
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!
@KevinPowell
@KevinPowell 2 роки тому
Great to hear and happy that you liked it!
@blackpanda5093
@blackpanda5093 Рік тому
I finally understand CSS Grid and i love it - thank you Kevin Powerll.
@Baraka0369
@Baraka0369 Рік тому
Out of no where, you delivered me from the hell. The best css grid tuto ever
@cesarpoumian5585
@cesarpoumian5585 3 місяці тому
I'm just so glad I have invested in Kevin's amazing courses. Thank you sir!
@fredoscott2346
@fredoscott2346 Рік тому
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.
@sahildas.
@sahildas. Рік тому
give him an 19/10
@henrimiti
@henrimiti 7 місяців тому
this is one of the best tutorials i've ever seen on youtube. thank you soooo much.
@MarkusRappat
@MarkusRappat Рік тому
Kevin, I'm learning all this CSS stuff for my own project and I was fighting for weeks with my grids. I watched your video at 4 am in my bed and just solved all problems... Thank you
@gangjira
@gangjira 2 роки тому
Lol I've been binge watching all of your grid videos the past couple days. Such a huge pleasant surpise! Ty ty
@darraghhayes6015
@darraghhayes6015 Рік тому
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.
@anjakalem9159
@anjakalem9159 2 роки тому
Thank You Kevin for being such an amazing teacher!
@markxavior
@markxavior 4 місяці тому
This is the best tutorial for grid. One stop video. Thanks Kevin 😊.
@CazCreates
@CazCreates 2 роки тому
Really great explanation of CSS grid, Kevin! Thank you ❤️
@user-cy5li7ck5b
@user-cy5li7ck5b Місяць тому
Hi Kevin, Loved the way made me learn CSS Grid. Never viewed such a simple & easy way.
@yashiel
@yashiel 2 роки тому
This is awesome, crystal clear introduction, thanks kevin
@Tech-tion55
@Tech-tion55 2 роки тому
I was totally confused about declaring the grid-template-column & grid-template-row property.... this really really helped me thank's a lot sir :)
@23Kattayopp
@23Kattayopp 11 місяців тому
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:)
@Lorkisen
@Lorkisen Рік тому
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.
@ricardodesirat2590
@ricardodesirat2590 2 роки тому
Great video, Kevin! I also love grid. Specialy with grid-template-areas! I separate them with tabs instead of spaces. It's a bit more organized in messy names :)
@perreiod
@perreiod 18 днів тому
bravo to your explanation skills. you explain it in such a simple way that I can actually understand. Thank you!
@rodrigueleopold784
@rodrigueleopold784 Рік тому
Nice video. I already knew a lot about CSS, but you explain the small details very well... Nice job :)
@AlexBlack-xz8hp
@AlexBlack-xz8hp 2 роки тому
Your content is so good! I've learned so much just watching a few of your videos. Thank you very much for all your awesome content. I will be watching much more.
@StevenDavisPhoto
@StevenDavisPhoto 6 місяців тому
Your videos are so helpful. I've been doing CSS since its inception and I'm always learning something new :)
@yogendra591
@yogendra591 2 роки тому
This is really helpful, Kevin! Been new to the channel, but loved the content in first go! Thanks:))
@rtsemensato
@rtsemensato Рік тому
Best video about display grid on the internet. Thank you very much for this exceptional content!
@atwarwithlife
@atwarwithlife 2 роки тому
omg, grid area is amazing. thank you!
@chiaraegbuna50
@chiaraegbuna50 11 місяців тому
Your lessons are so fun. passed the information without boring your viewers
Learn flexbox the easy way
34:04
Kevin Powell
Переглядів 669 тис.
Learn how to use Media queries & Container queries
34:33
Kevin Powell
Переглядів 49 тис.
🔥 Україна виходить у ФІНАЛ ЄВРОБАЧЕННЯ-2024! Реакція alyona alyona та Jerry Heil #eurovision2024
00:10
Євробачення Україна | Eurovision Ukraine official
Переглядів 324 тис.
Не пей газировку у мамы в машине
00:28
Даша Боровик
Переглядів 2,1 млн
Learn CSS Grid - A 13 Minute Deep Dive
13:35
Slaying The Dragon
Переглядів 434 тис.
Responsive layout practice for beginners
1:11:37
Kevin Powell
Переглядів 96 тис.
Get started with grid WITHOUT being overwhelmed
9:39
Kevin Powell
Переглядів 87 тис.
23 CSS features you should know (and be using) by now
31:31
Kevin Powell
Переглядів 49 тис.
Intro to CSS Grid - Create a Basic Layout - Web Design Tutorial
17:15
Learn CSS Displays in 12 Minutes | Grid, Flexbox, Inline Block, Block
12:15
CSS Tips And Tricks I Wish I Knew Before
12:12
Lama Dev
Переглядів 395 тис.
How to take control of Flexbox
16:01
Kevin Powell
Переглядів 78 тис.
Can I make this animated navigation design with HTML & CSS?
1:57:21
Kevin Powell
Переглядів 120 тис.
OpenAI SHOCKED Everyone! Voice, Vision, & Free?!
8:58
Theoretically Media
Переглядів 26 тис.
🔥 Україна виходить у ФІНАЛ ЄВРОБАЧЕННЯ-2024! Реакція alyona alyona та Jerry Heil #eurovision2024
00:10
Євробачення Україна | Eurovision Ukraine official
Переглядів 324 тис.