Learn CSS Grid the easy way

Подписаться 907 тыс.

Просмотров 861 тыс.

50% 1

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 RU-vid 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!

Опубликовано:

17 май 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 772

@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 2 года назад

I was gonna say that 🤣

@BlockCylinder 2 года назад

Happens to the best of us, right?

@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 2 года назад

You explain so well... Now I really understand grids!

@alilemo2134 2 года назад

i didnt notice !! very clear explanation

@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 2 года назад

Yeah me too... I guess kevin can read minds

@ngoako 2 года назад

Haha same

@mattifresh 2 года назад

Bro! Same🤣

@Cognitoman Год назад

I like turtles

@TulsiCurryWorld Год назад

I agree . Awesome

@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 2 года назад

I study webdev and he's a favorite among me and my classmates, he's addicting

@johnryder8464 2 месяца назад

Addictive is the correct word🙄👎

@kbCorruption 4 дня назад

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!

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

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

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

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

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

@secretskpg 8 дней назад

Hello Kevin, While this is one of the few comments I've ever made on RU-vid, 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!

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

@davidmyersdev 2 года назад

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

@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! 😊

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

@fakeitsoyoumakeit 4 дня назад

after two months of struggling i've found this 💯

@MauFerrusca 2 года назад

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

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

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

@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 2 года назад

Glad it was helpful!

@imnemo2327 2 года назад

way short for grid really that shit is so complex but well organized

@Baff0000 2 года назад

@@KevinPowell Man I just wanted to see the end result but I watched it till the end.

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

@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:)

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

@eddiemilla6983 2 года назад

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

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

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

@MatthewWeiler1984 2 года назад

Thank you so much. I generally stayed away from grid because it seemed too daunting. But your explanation really helped me :)

@KevinPowell 2 года назад

Glad it helped!

@xClown55 2 года назад

Can never have enough flex/grid content, thanks for sharing

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

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

@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

@beaverplugins3851 2 года назад

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

@sprtlife6261 2 года назад

It's incredible that this is free content. Thanks Kevin, helped me understand grids finally!

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

@johnpaulpineda2476 2 года назад

Just saw this vid. The grid-template-area are so life-changing. Thank you so much Kevs!

@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

@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! 👍

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

@nielsvandervelden3063 Год назад

I was always struggling using grid for more complex layouts but after watching your video everything becomes so easy!

@dannyyang9181 Год назад

I always come back to this video when I need a quick refresher on css grid. Thanks Kevin!

@clevermissfox 8 месяцев назад

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

@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. Год назад

give him an 19/10

@The-Sentinel Год назад

one of the best grid video examples ive seen yet. It fits perfect for something like testimonials

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

@jornzander1285 2 года назад

This is just the best of all grid tutorials I've had so far. Mean it.

@scoworthyuan Год назад

Kevin your technique really sheds light on how to use the grid, many thanks for this detailed explanation!

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

@phillipmeredith6101 Год назад

Man! I'm so glad I found your channel. You're videos are great! Thank you and keep up the good work.

@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 Год назад

what's showing in your comment ?

@vdjayaram5053 Год назад

@@rajeshsingh-mv7zn donation

@KevinPowell Год назад

Thank you so much (and sorry for missing this until now!)

@gsonego 7 месяцев назад

What a lesson! Amazing how simple this is. Thank you for sharing!

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

@in91gaming15 2 года назад

Probably the best video I’ve ever seen of grid layout! Thanks man ❤️

@hqprivat 5 месяцев назад

Wow, so much I have learned in this short video! I really enjoyed it! Thank you very much, Kevin!

@DioD3 Год назад

I'm self learning html, css and js and your videos are superb. Thank you!

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

@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

@michaelm8044 Год назад

Thanks for covering all bases in terms of responsiveness, shorthand, overwriting potential, and so on.

@Alex.Shalda Год назад

Absolutely exhaustive and thorough explanation, what a magic!

@henrimiti 7 месяцев назад

this is one of the best tutorials i've ever seen on youtube. thank you soooo much.

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

@jgvlc Год назад

Thank you very much, you have synthesized very well what is necessary to apply css grid in our layouts, your content is gold!

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

@markxavior 5 месяцев назад

This is the best tutorial for grid. One stop video. Thanks Kevin 😊.

@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 RU-vid. My brain thanks you for making learning this feel like it was still a break. You are a damn wizard.

@jasoncabreros 6 месяцев назад

Been enjoying your videos. Easy to follow and understand and the fog of not knowing is being lifted. Thanks!

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

@glynislily 2 месяца назад

I have been struggling with this. OMG you made it so simple. I'm adding your videos to my studying!

@user-cy5li7ck5b Месяц назад

Hi Kevin, Loved the way made me learn CSS Grid. Never viewed such a simple & easy way.

@e.m.janssen3638 Год назад

Super clear and easy to follow, thanks as always for the awesome tutorials.

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

@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 :)

@atomz520 Год назад

Very informative and easy to follow along. Thanks for being so clear with the tutorial!

@mikeshaw4610 5 месяцев назад

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.

@Baraka0369 Год назад

Out of no where, you delivered me from the hell. The best css grid tuto ever

@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 👌

@abbosshomurodov8964 2 года назад

Thank you so much Kevin. You helped me a lot with understanding the weird parts of grid. You are the best!!!

@chill70730 2 года назад

You made this way more easier to understand for me, thank you so much!

@jisrite 2 года назад

Watching RU-vid 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.

@informativeworldforyou7562 8 месяцев назад

I was a absolute beginner to the grid system but this man made things simpler thanks

@blackpanda5093 Год назад

I finally understand CSS Grid and i love it - thank you Kevin Powerll.

@cesarpoumian5585 3 месяца назад

I'm just so glad I have invested in Kevin's amazing courses. Thank you sir!

@nurullohubaydullayev5413 2 года назад

Thank you very much. This video was much better and clearer than the others ’ lessons.

@yogendra591 2 года назад

This is really helpful, Kevin! Been new to the channel, but loved the content in first go! Thanks:))

@ngoako 2 года назад

I was just thinking of re-learning CSS grid. Perfect timing.

@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 2 года назад

Lol I've been binge watching all of your grid videos the past couple days. Such a huge pleasant surpise! Ty ty

@Karaz608 2 года назад

I spent a whole day learning and memorizing. thank u so much your lessons are valuable and appreciated. we love u, sir.

@yashiel 2 года назад

This is awesome, crystal clear introduction, thanks kevin

@abidtaqi3842 7 месяцев назад

Great content! You made a complex topic so easy to understand! Thanks a lot!!!

@mirvids5036 2 года назад

I loved grid from the first time I saw a seminar on it a few years ago. I thought it made all other options redundant yet they seem to persist like flex, bootstrap etc. This video is just excellent and reaffirms my original view. Thanks !

@minhanh0604 2 года назад

I am think so, as well.

@rodrigueleopold784 Год назад

Nice video. I already knew a lot about CSS, but you explain the small details very well... Nice job :)

@CazCreates 2 года назад

Really great explanation of CSS grid, Kevin! Thank you ❤️

@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 2 года назад

Great to hear and happy that you liked it!

@chiaraegbuna50 11 месяцев назад

Your lessons are so fun. passed the information without boring your viewers

@rtsemensato Год назад

Best video about display grid on the internet. Thank you very much for this exceptional content!

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

@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 :)