Get started with grid WITHOUT being overwhelmed

It can be easy to be overwhelmed by CSS grid, so in this video I look at the very basics to get you started without worrying about too much at once.
🔗 Links
✅ The next step with Grid: • Learn CSS Grid the eas...
✅ Grid inspector: • The grid inspector: ma...
⌚ Timestamps
00:00 - Introduction
01:02 - the relationship between the parent and children
03:51 - grid-template-column basics
04:35 - the fr unit
06:20 - comparison to flexbox
07:19 - the repeat() function
07:37 - responsiveness
#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 KZbin 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!

[@apporvaarya]

ur channel is my go-to resource to refresh and add to my CSS understanding... thanks Kevin

[@alwinter]

Thanks for boiling down CSS grid. I sometimes tend to overthink when using it. I'll be keeping this video in mind moving forward!

[@LTLongterm]

Hey Kevin! I just wanted to say thank you, CSS always kinda intimidated me but you've made it so easy to comprehend for me, immensely thankful

[@omotehinseelvis9845]

You've literally fast tracked my CSS learning journey since I found your contents, thank you.

[@_loss_]

I really needed this. All your videos are so great because of how good you are at explaining things.

[@ncookiez]

I literally just had to design a grid, and being more familiar with flex I tried to use it. Had a lot of problems with that. This solves my problem perfectly, with 2 lines of code. You're magical!

[@Allformyequine]

So awesome as usual!! Just perfectly explained!

[@daleryanaldover6545]

Whenever I need reference videos for teaching interns, I always refer to you videos. All the things you teach here is always relevant!

[@CraveThatCoin]

Fantastic tutorial. I've been working with HTML/CSS for over 10 years now (even the old floats/clear). The one thing I have avoided to this point is grid. This gives me confidence to dive in.

[@joyvideos1802]

You r digging something up in css everyday & bring us css golds. Thanks a lot Kevin

[@brujala1775]

I am so glad i watched this video, i love this channel!

[@fullmoon8524]

I've recently found you and I'm so glad because I can understand html/css much better due to your excellent explanation. You are a real gem. 🙂🙏🏻 Thank YOU so much!

[@engjellbakiasi742]

are you nuts? this is the worst video about grid in the entire world!!

[@developer_hadi]

BEST GRID TUTORIAL ON KZbin , THANK YOU SO MUCH❤️

[@jeisondiasf]

Your videos are amazing! I'm enjoying all of them. Thanks for sharing your knowledge with us.

[@omniosi]

Excellently explained as always! Nothing else I read made this much sense.

[@ethanjames]

Thank you so much Kevin, you helped me understand this even more than I did before kudos.

[@iamtharunraj]

Your explanations are so good to hear! ❤

[@jeralidea]

I think Kevin is the best I'm learning to write CSS with confidence...... thanks a lot Kevin!

[@iamavegetable1936]

Excellent, clear, concise and good examples. Thanks a lot!

[@mikaelayumang2839]

thank you sir! your explanation makes css grid easy to understand

[@jrealm5464]

i love you kevin, you've saved my css life too many times

[@alijahan]

thanks Kevin , i was just trying to use grid and i was confused since i always use flex and this came out just in time

[@omkarp9943]

This video is very helpful Mr. Powell. Thank You!

[@BABANSK]

you taught me many things about CSS. I was not good at designing part a few months ago but now I can say confidently that I know CSS. thnk you, Kevin. Love from India.🤍

[@matthewwhite3744]

Loved this! Just what I needed for these frontendmentor challenges because I want to start using grid instead of flexbox

[@mathis-meth4229]

thank you so much sir. it's so good to see videos from you. and I love your love for css. We all are waiting for you to start uploading Javascript videos also.

[@giulia6930]

Thanks, you taught me everything I needed, I'll follow your advice to learn grid in the best way🙏

[@reb569]

Thank you for this video. This is awesome! I have been doing a deep dive into grid over the last couple months and this is very helpful! At work we've been using bootstrap since 2016, and I understand that pretty well, but it has actually put me behind on keeping up with modern css, including flexbox and grid. I am hoping after during our next redesign that we ditch bootstrap. It's such a "heavy" framework.

[@fadehelix]

Thank you soooo much for this guide!

[@tyronefrielinghaus3467]

Super Kevin... you're an awesome explainer...and I like how you concentrate on the essentials. I'm new to grid...and this was super helpful to get me started. Thanks!👍 Oh...and you don't dumb it down either...you actually give insight on what's really happening. My kind of learning!

[@FuzailShaikh]

Thanks for making these videos mate ✌️

[@nathanmark4219]

thanks for making css easier to understand

[@irenanmatthew9432]

Thanks for this!!

[@Izumiko1_1]

thank you, this made it easier to understand

[@cameronerasmus633]

Hi Kevin! Thank you for all of your time and effort put into these videos - I'm a backend coder primarily but recently I've taken on a project that is really challenging me on the frontend. I have a layout that I would love your opinion on materialising. It's a CRUD system that has a topper and a sidebar (left side), and all other cards are rendered in the whitespace created by the top and side bars. I need the bars to remain position while the components in the whitespace change (using Reactjs). I tried sticking to flexbox only, but each of the components are built individually and then composed together to build the page. I ended up creating wrapper upon wrapper upon wrapper... you get the idea. I then tried grid (with components themselves using flex), it makes incredibly logical sense to me - however, I am having problems with different resolutions. Widths of the devices used on the frontend range from around 1300px to 4096px (no mobile). At this point I'm sitting with grid containers upwards of 60 columns and I'm getting nowhere.... Look FANTASTIC on the 4k res, but a driven-over grilled cheese below 2000px. I would GREATLY appreciate any advice you have on this 🙏🏼 Here's the concept: drive.google.com/file/d/17cmDBVCrFvtafVGUygOCQbIR6_6-IYUn/view?usp=sharing

[@lajosn]

At last, somebody have maked it clear. Thanks!

[@alexprofit4937]

Thank, you I'm looking for this guide.

[@Agent12214]

Seriously, thanks Kevin!

[@danielallen8434]

Thank you, it is so helpful.

[@chukwuemekaemmanuel2497]

Honestly sir, you deserve an award. Thanks..

[@AnastSid]

That was a cool Video as usual keep doing what you are doing

[@mbcx3621]

No one's talking about it, but I do like the darker ambience and colours of the background you have in your room! (or where you're doing the recording.) 😊👍 (great video! Always learning with your videos)

[@alvaroprietovideos]

Thank you for sharing 🙏

[@hammerofolympia3716]

Thanks this was well timed i was messing about with grid earlier and made the mistake of using %

[@galainak4195]

You are a very good teacher!

[@prakharmathur619]

loved the video, simple and straight to the point. Just one question, when is your new scss course gonna launch? Been waiting for it !!

[@dailynews7822]

Nice done. Grid is good layout

[@denizcuhadari4334]

Hey Kevin thank you for these great videos. I would love to see a video about css browser compatibility. How to write (and test) css that's supported by the majority of browsers. I've recently struggled a lot with the gap property not being supported on older Safari browsers.

[@chezchezchezchez]

How many grid videos you got now Kevin ? Lol Finally, the one that won’t overwhelm us. Where has this been all my life? 🤪

[@ygaaaoo]

thanks man for the tutorial

[@rishabhranjan5162]

You are amazing sir

[@brdoc12]

I always use this: grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); Or you can use 'auto-fill' instead of 'auto-fit'.

[@andreaskarz]

Wow, how easy is that? Great, thank you.

[@thatboymoti]

THANKS! JUST IN TIME

[@daveskye]

Nice. I have found Grid 'overwhelming' to learn, so have so far stuck with flexbox on my designs. Maybe I should start!!

[@sawyer303]

Grid template areas made my life so easy

[@nabilalaa7466]

css king, thanks a lot ❤

[@rohan1765]

Great brief introduction for someone who doesn't know grid 🙂

[@abdollahmemar9170]

tnx for your video

[@chadchampion893]

the goat of css

[@arpitagarwal8330]

Hey Kevin i m in love with ur css videos and tutorials.i have learned css and learning advanced by ur KZbin and practising.where can i learn javascript and master it

[@ekek7]

So you are telling me that I don't have to bang my head against the wall trying to figure out CSS positioning and display flex? 🤯🤯 Considering that every website nowadays uses some type of a grid, I am using this in every container I design moving forward.

[@ysammo214]

Thankyou

[@Sure_Math_Center]

5star! So good!

[@DiFedericoStudios]

Hi Kevin, I have been watching your videos for a while now and have learned so much especially when it comes to grid. I have a question about grid I am having trouble finding an answer to. Maybe you could help. If you have a grid container with 3 children that have grid area names to make a grid-area-template on the container. What happens if you introduce a new div to the grid container that doesn't have a place in the grid-area-template. For example an off screen navigation. should this live in the grid container or should it be placed outside container. I have tried it and it doesnt effect the grid being inside, but is that the best setup? Been looking for a definitive answer on this.

[@flashbond]

I am really envy of your skills. I always wondered that if is it possible to make a CSS-only masonary? It was inpossible 10 years ago when there were no CSS grids. Back then the time that I was building websites to make extra money. Now I wonder if is it possible today's CSS properties? EDIT: I found your video!

[@michalnowak2181]

thx

[@MuhammadAhmedAshraf]

Hello Kevin Can you make an animation like youtube when you have internet avaiable that shows the button retry and when you click on it the animation just looks so amazing when longpress the animation goes slowly from where we clicked and when fastclick it goes fast and stops at 90% and i have researched it the animation name is paper ripple but those weren't i was expecting i think it can easly been done on android studio because i have seen this type of animation from android developers but can you make it with css and we enjoy your videos so much

[@KevinPowell]

Ah, yeah, Google uses that in a lot of places. I'll look into it :)

[@MuhammadAhmedAshraf]

@@KevinPowell another one the customized tool tip when hover on channel tip and it position it self automatically when there's not enough space to the top and bottom can you also do backend and frontend mix videos since your css knowledge is already so amazing. It's been three months since i have been coding and now i am stuck i don't know what to build what project can you give me tips

[@brandon_wallace]

Grid is pretty cool.

[@UmanPC]

GREAT

[@izexi]

pls make a video with elements placing with grid as centering etc. im using flex with justify-content, align-items, flex-direction, but im stuck with it in grid i would be really appreciated

[@jonathonkiner7415]

Thanks Kevin!! Is there any specific reason/instance when grid should be used instead of flex?

[@KevinPowell]

I've talked about it before in some videos, but the tl;dr is grid is better for more structured layouts, flex is better when you want the children to have more control. So, grid for more of a "layout", flex for things like navigations, tags, and some other things like that.

[@MarcMateos]

Hi Kevin! I've been struggling with this for way so long now, and didn't find the solution. Is there a way to make a column defined in the grid "optional"? I would like to keep the grid layout all around my site, but there are some sections where I don't have a sidebar in it. Is there a way to define the grid as something like "if the sidebar is present, then put in here with this column fixed size, but if it isn't, simply expand the main cell in the grid to fill the container". I know this can be done quite easily with flexbox (with flex-grow:1 and, simply, not adding the sidebar to the DOM), but now I'm learning grid and I've been stuck trying to figure out how to do it. Any advise? Is it even possible? Or due to grid specification the layout needs to be as it is, consistently? Thanks a lot!

[@ayushyt918]

Hii Kevin can you explain how to make a vertical timeline made using grid please Kevin

[@yanhuan1]

Hello, Kevin. Can you make a Responsive Design with Grid course?

[@KevinPowell]

Got some idea in the works :D

[@ZiaCodes]

@@KevinPowell kevin can I work with you in building some websites?

[@fumblingwelli]

Omg i realised your power

[@proteus1]

Do you have a min-max and auto-fit for a css grid layout?

[@N7Null]

How did you get the detailed inspect element info tooltip at 6:45? Mine only shows the element and size.

[@KevinPowell]

In Chrome? I haven't done anything special that I know of to get that.

[@N7Null]

@@KevinPowell Yeah, I didn't realize you were using Chrome until I tried figuring it out myself. Thanks for the response though.

[@bunnyboy7008]

Btw, an offtopic request. Firefox has temporarily disabled "Backdrop-filter" property in their browser on account of some bug. Is it possible to get a video (or maybe even a short) on how we can create a workaround for this? Afaik @supports doesn't work either because of some other bug in the browser & the only viable solution is to be some other workaround. One can enable backdrop by going in about:config but considering not many users will have it enabled by default, it'll break out site's design. Would you be willing to look-up on it?

[@Trazynn]

How do I build a hexagonal grid in css?

[@mariomeza3514]

So correct me if i'm wrong, but wouldn't it be better and easier if we replace using flex with using grid with all projects? Grid can do all the things that flex can do, except that it seems you have more control with grid and grid is more accurate.

[@somnathgolui2912]

are you useing tailwind CSS??

[@KevinPowell]

Nope :)

[@JoeBonez]

Can you explain why, often when doing columns with say “repeat(10, 1fr)” I do NOT get even columns? I have to change it to repeat(10, minmax(0,1fr))” to get even columns. I find that this happens quite often when doing grid layouts using areas. Thanks!

[@KevinPowell]

I'd have to see the issue to comment, I can't say I've ever run into something like that 🤔

[@jfreeg]

How about box sizing ?? To make sure it doesn’t overflow

[@brownrhythms]

I believe that's one of his defaults when making a full CSS file. I just don't see percentages used that much though unless as he pointed out you actively want it to be that size.

[@jfreeg]

@@brownrhythms right

[@KevinPowell]

box-sizing won't really have a big impact if you're using grid, unless you're setting widths on the items inside the grid and allowing them to set the cell widths or heights (with a template-row or column set to something like min-content or max-content).

[@hagopderderian6824]

Sorry i have question dont you have javascript videos? like for beginners and stuff

[@KevinPowell]

I touch on it now and then, but CSS is my main focus :)

[@user-ms8ei9le7x]

®️

[@CheerfulNE]

I have been using FLEX inside GRID, is that a wrong way to do so?

[@straightupanarg6226]

Nope

[@CheerfulNE]

@@straightupanarg6226 thanks mate, appreciate the answer.

[@nomadshiba]

i never use @media queries. they are not reliable if you are designing components not pages and i dont like having different css for different screen sizes i just use flex and grid tricks to make reusable responsive layout components

[@nomadshiba]

for example lets say you have a form, and a button on wide screens you want button to not fill all of the space and you want it to fill all of the space when on mobile so you do something like this .fill-on-break { display: flex; flex-wrap: wrap; } .fill-on-break > * { flex-grow: 1; } .fill-on-break::after { content: ""; min-width: min(100%, var(--min-empty-space)); flex-grow: 1000000000000000; } and put the button in it you can also make this `justify-items: center`, and it would center the button on break inside of filling the whole space

[@KevinPowell]

Media queries aren't perfect, but they serve a purpose, and hacks like that (which work!) will just confuse someone who's just getting started, who this is intended for. I'm also really looking forward to container queries, so we won't need things like that in the future.

[@CraveThatCoin]

@@nomadshiba Not sure how you can say media quires are not reliable when your own code would be more likely to cause browser compatibility issues. Media quires are tried and tested but of course less is more.

[@straightupanarg6226]

All hail god-king Algorithm!

[@hyperprotagonist]

Kevin, without sounding abrupt but inevitably doing so, you need to work on repeating the phrase “I’m going to come here”. 🤫

[@lenarnie2973]

Grid looks so nice on these Basic content. But its so useless to use in real web template building. U Can use Grid when u want image Grid or something, but build web layout with Grid is useless. And it have white space Bug , Flex have this Bug too

[@KevinPowell]

I use grid for real layouts all the time, more often than flexbox. If you get complex and layout things on specific lines and columns, I agree that it's not very practical for scalable solutions, but you don't need to use it that way. And what's the white space bug? Both flex and grid don't have collapsing margins on their children, but that isn't a bug, it's an intended behavior.

[@lenarnie2973]

@@KevinPowell white space at bottom, where is 1-3px space after last item in Grid or Flex. And u cant use background color, bcs it looks so Bad with that space. If i Remember correctly, it happens when i use img inside the box, idk right now. I will work with it again and i send u example of it

[@dimkayilrit2606]

@@lenarnie2973 use 100% width and height on the img. img{ width:100%; Height:100%; } it will cover the remaining space

[@oliverR155]

you didn't actually compare it to flex, you just changed display to flex...?

[@KevinPowell]

Fair enough... to get the same thing I would then have had to make a new selector that selects all the children, and declared either "flex: 1" or "width: 100%"

[@TheLightedSky2112]

Love how all his 'GET STARTED' videos include: "OK, as you can see I've ALREADY LAID OUT STEPS THREE HUNDRED AND FORTY-SEVEN in this process so let's just continue with...". Never actually starts at the beginning of anything, ever. He also seems completely uninterested in defining basic characteristics of core element behavior. Too bad.

[@KevinPowell]

What steps did I skip? The only thing was having some HTML in place. I could have written that out, but I broke down the structure it needs to have, which is really all that's important here. The stuff in those divs could be anything at all.

[@TheLightedSky2112]

@@KevinPowell Guess I just have to work harder at it and dive deeper into the labyrinth at it's structural root. Thanks for the feedback!