Learn CSS Grid the easy way

have you just started to learn grid or you've been trying to learn it for a little while now and you just get bogged down in it because there's there's a lot of complexity with it right there's all these new properties there's new values there's even new units and it can just seem like a little bit much and maybe you already have some experience with flexbox that always seems to get the job done for you so why even bother with grid well grid can do things that flexbox can't first of all and actually i think if you simplify grid down and start using it in very simple ways it can actually be easier to use and learn than flexbox can and that's why i want to look at how we can simplify grid and look at the easy ways to get working with it we're going to be doing that in this video hello my friend and friends and welcome back to yet another video i'm so glad that you come to join me once again and if you're new here my name is kevin and here at my channel i hope you fall madly deeply in love with css and if not fall in love with it i hope to at least make you a little bit less frustrated with it and today we're doing that by exploring a topic that is one of my favorite things to use with css which is css grid in simplifying grid i actually think there's different ways that we can simplify it so i'm going to be breaking this down and we're going to be examining this layout with two different approaches so one of them is going to be more of like a natural starting point i think for grid and just understanding the very basics of how we can simplify grid to get the layout that we want it to make for us and then the other approach we're going to sort of scrap what we did and take another way that i really like to work today and what i'd really encourage you to do is watch both of them and see which one speaks to you a little bit more some are more practical for some layouts some are more practical for other layouts but for both of them i think they're very nice simple ways to approach things and none of it's going to sink in you might watch both of them and go they both make a lot of sense grit is easy and then try to use it and you might get stuck make sure when you're learning something like this that you're practicing it but as much as possible i'm trying to eliminate some properties some things that we don't need to be using because there's so many out there for grid i want to focus on the ones that we do need to really understand it and on the ones that we can use to simplify our life especially with media queries and other things all right so for this one i'm actually building out this layout that you can see here which is in figma right now but this is from front-end mentor and i'm doing it just because i was trying to find a nice layout that we could build that would require grid and this looks pretty gritty to me so we're gonna use this as our example but what i've actually done is i've actually done quite a bit of work already in getting things styled but i haven't applied anything to do with grid yet at all now if you'd like to follow along the github repo for this is linked down below and i've included the starting css so exactly what i have here and this style.css will be the finished version of it so if you want to follow along or play with what i have to start with you can do just that and let's jump in there and here i have my testimonial grid and actually let's just go take a quick look at my uh my markup and so basically i have my main here which i set as my testimonial grid and then inside my main i've just put each one of these card type things as its own article with a class of testimonial and a few other utility classes and things on there that aren't too important but what's really important is this these are the direct children these articles right here and so what i'm going to do is come over to my style where we have my testimonial grid and i think we know what we want to do i have the first thing to start with grid is we do need a display of grid and i won't tell you how many times i've actually forgotten to do that and when you do display grid generally speaking nothing will really change and this is actually one of the things i like about grid compared to flexbox flexbox will work it gives you the columns but sometimes those columns don't do what you want them to do and you have to finic around a little bit and get things to you know it can be a little bit strange if it doesn't do exactly what you want it to early on uh whereas with grid you do display grid generally not much changes sometimes if you did it and there's paragraphs all of a sudden things might become double spaced because with grid and with flex the direct children so the grid items or the flex items no longer have collapsing margins so that can be a little thing that can get in your way but we have no margins between these so absolutely nothing changes but we do need some spacing between them and this is where people will sometimes use margin to create spacing um or of course we have gap and i'm going to recommend gap 100 of the time because we need vertical spacing and we need horizontal spacing vertical spacing and horizontal spacing i always get those backwards if you've been following for a while you know that um and because we want this spacing to all be equal everywhere gap makes a lot of sense but in general with the gap property by doing it we don't get gaps on the outside of any elements and things like that like if you want to add margins through a grid system of any kind it gets a little bit annoying even if it's just columns going across and you don't even have rows i'd always always always recommend gap now and margins i'm using less and less and less for little spacing things so let's come in i think it's a 1.5 ram maybe it's a 2. that looks pretty good so i'll stick with that and we're started we have a grid and we have my gap and one of the first things i'm going to say is if you are working with grid make sure that you use your dev tools so i am going to open those and in my dev tools i'm going to be bringing them off screen just so it doesn't take up too much room but what i'm going to do i'm in the accessibility tab let's go and just go to my inspector um here i have this grid on here and this is a little toggle i am in firefox and i like firefoxes especially for demos because things are much bigger and easier to see um we're going to be looking at our line numbers and a few other things chrome has all of these things too it has the area names it has line numbers and these visualizations so whichever browser you're in it works almost exactly the same and you can see your grid you can change the color of the grid so actually let's go to a darker color just so we can see it a bit better maybe something like that just wait something that pops a little red um but something that pops a bit on our layout and again you can do that chrome or firefox and safari actually the safari's new chrome inspector is really really good um you can even there's some scrolling issues sometimes you might get with like overlaying grids and stuff safari's new one is surprisingly powerful and good that's what happens when jen simmons is on the team um so we have display grid that's there we can see my gaps that are coming in now and but we of course need some columns and this is the first thing i'm going to say if you are setting up a grid and you're not really comfortable with using grids one of the hardest things to know is how many columns you might need so i'm actually going to come on here and i'm going to grab my pen tool not my pen tool my pencil tool which i don't know the shortcut of because i never use it um but we're going to pull that open and i always always recommend and we can't see it because there we go we can see it now figma chooses the color of it based on the background and i was drawing on the purple so it shows a white pencil so there's like the container that i'm inside that's my main grid and then i clearly need to have something that goes here but that does need to come into this area here so let's highlight that in white too just that line continues here here's the nice easy one that goes all the way down like that but look oh we have another you know we're looking up here you might go i need a big one a small one and a small one but don't forget over here this gets split too so i need to split this one across like that as well this is where it can really help you visualize how many rows and how many columns you actually need because when you're looking at a design sometimes you miss things and sometimes you need three rows instead of two or six rows instead of three depending on what you need to do even now i get tripped up sometimes and i eventually get it if i'm not drawing on top of it and this takes three seconds to do and then it just makes it a lot easier so i know i need one two three four columns i also need to have two rows but i'm not going to declare them i'm going to talk more about that soon but i'm only going to declare my columns for now so i'm going to say grid template columns which is how we can declare our columns because we're setting up our template so it's the template columns that the items will live on so grid template columns and there's one unit if you're new to grid we'll go slowly with this so here i'm just going to make this a bit bigger to give myself a bit more room so we can see everything i'm going to write and grid template columns we have to say what they're going to be so you could come in here and say i have 100 pixels and i'm just going to do one and hit save and now i have one column that's 100 pixels and then i can just put a space and do 100 pixels and now i have two columns and then i could say pixels and have three columns cool uh that really that works really well uh another one you could do is come in with percentages 25 percent 25 and 25 and okay so that's working and it might look like it's not working but it's because it's hiding so there we go we have three columns going all the way across that way and one thing we want to do is actually divide this space up equally so one week one way we can do that is with the fr unit so one fr and this is a new grid only or i won't say new because it's been around for a while but it's a grid only unit which is like it sort of uses the flexbox algorithm from what i understand of it and it's basically a fraction so one fraction one fraction one fraction so we're saying divide all of those up equally now you can do more with frs than this but i find most of the time you just want nice even columns and so this is a really nice way to get it to say each one is getting an equal amount of space there is more complexity to how this works but we're not going to dive into that we want to keep things simple and almost every time you use it that's going to be the result that you get is three equal columns or if you did five you get five equal columns so on and so forth now i'm gonna make this guy a little bigger again because what happens with grid is sometimes you end up doing that or i just said five so you end up actually putting in five and then when you want like to change this it's a little frustrating or even typing it out when if r1 if r1fr it's kind of annoying and they realized a lot of the time we're going to want equal for all of them so that's where we have the repeat function that we can use and in repeat you say how many times you want to repeat it put a comma and then say what you want to do so let's put 100 pixels again just so we can see that working and so it's repeated three columns at 100 pixels but of course i don't want 100 pixels we saw that fr works so i can just say three and one fr and that gives me three columns that are one fr each except of course i just set this to three but just thinking back we actually want that to be four right there we go uh because again why is it four let's go look we have one two three four columns on my layout not three that was a little silly on me there we go uh so we get my four columns going across and you'll notice i haven't set any rows yet and actually for now i'm gonna let's bring this back to three because it looks a little nicer for the moment and we'll go back to four in a second um i just want to talk a little bit about setting grid template rows because i think this is one of those places where people add complexity that they don't need to add because notice if i say there's three columns my content if i have more than three so when i have more than three children in here like these articles if i have more than three of them they just go oh i got to the third column there's no more columns in this i'm going to create a row and come down here and this is where you might hurt here the terms implicit and explicit grid so this is where i've explicitly declared three columns so i've said there are three columns i haven't said how many rows there are so the grid is creating new rows for me as it needs to and these are implicit rows because it's just going there's content here that needs somewhere to live i'm going to make that space automatically without you telling me to do that and as much with the web in general we're so used to like items you know the auto height where it just grows by itself we place new items they stack on top of each other by default we're very used to that idea of new things just sort of coming in and going where they should go automatically so when i can i try not to declare grid template rows i will declare it when i need to when i have very specific grids where i'm trying to do very specific things that need a bit of finicking around and a bit of finessing and a little bit of other stuff going on but for uh for the most part you can get away with grid template rows and not declaring grid template columns and if that's the case i strongly recommend that you do that because it just gives you a lot less overhead and a lot less to think about when you're making it just because you just have to worry about your rows and everything just sort of falls into place from there and what i'm doing here with these explicit columns is i'm saying also how big they have to be whereas with those rows that it's implicitly creating or these automatically created rows it's just doing what it needs to do it's matching the height of the tallest one basically so that's a lot like how flexbox works right if you do display flex they just all match the height of the tallest item you can change this behavior and you can get control on your auto rows or auto columns if you fall into that world but we want to keep things simple for now so i'm not going to get into that but it is a possibility but let's keep things as simple as we can so every time you're going to do a display grid you'll probably want to set a gap on there and then you're going to set up some columns then if you need to start worrying about more but we're not going to do that we're going to let's fix this we go back up to four and let's start trying to get this layout to work for us a little bit and so let's go look back at our layout and we have this one here and this one here that need to span across two columns each so let's go and create something that can allow us to do that and what i really like for this type of thing instead of trying to find like a class a specific class that you know for each one of those and writing it twice i'm going to come here and i'm just going to write a dot grid span 2 and i could call this just um you know span 2 i guess if i wanted to i just like being really explicit this class should be used with grid so i start with grid it's just sort of a little naming convention but you can name it however you want you might be saying well there's no other way to span there is the multi-column layout that actually does have spans and it did before grid even existed i believe uh but and it's a little bit different and how that works but we're going to do is say my grid column and even here this i guess this could be grid uh call call span too just in case you end up with row span twos so let's do that grid call span two and so my grid column will be you want to guess span two isn't that so easy uh grid column is a shorthand property and we're going to explore that a little bit more shortly but one nice thing is when you just need to throw spans on stuff it just works it doesn't matter that it's a shorthand it puts it sort of where you where it should go because you could actually put the span on the start or the end anyway that's going to work i'm going to hit save so it's here and we'll go over to my html and we're gonna add that in two spots where we need it on my first one so this is my first article grid call span two if you're saying that's a long class name it is but that's okay i like longer class names if they really explain to me what they're doing that's fine i don't want like a gcs2 or something because then i'll never remember that and i'll never really know what it's for or if somebody else comes to my code they don't know whereas this it's very explicit if somebody were to come across this they see it there's a grid and they see these are grid column span too it's just super clear so i like clear class names that explain exactly what they're doing so let's hit save here and see wow look at that now there's some weird funkiness coming up over here because this one is now so long and it's mucking this up because remember they're stretching to try and match each other's heights but that's okay we've made some nice progress where the real issue is actually coming from is this one is in the wrong spot but i put it there on purpose and not on purpose because of it would actually make more sense if this was one two three whoops let's get that in black three four five right because then it that would be the order i see them in here the thing is in this figma design we have a mobile layout too and janet is the third one that's the third one here i like working mobile first we're gonna talk about the media queries in a second though but right now we need to get this one over here or kira over here one or the other and to do that there's lots of different approaches and different ways we could do something like that this is where for me utility classes don't quite work just because you're placing things in very specific spots or moving things around um i just find it easier to actually target the class that i want to work on and i could actually just give this specific one a class and target it because if i look here that it's all very generic my classes i have testimonial the background colors and a few other things going on there but it's all very generic classes to style this up so there's different ways of selecting it just for simplicity's sake and not worrying about creating a class for it i am going to use the nth child selector or i'll choose the last child selector i guess just because it's going to be faster for now uh if you want to make this a little bit more plug and play you could then actually give them very specific classes that could make this work but this is my test it is a testimonial so we're going to say test demonial last child and because that's going to select the last child let's say background red important just to see there you go we can see that it's actually selecting the one that we want it to select so let's get rid of that and now we can get a little bit more about placing items on the grid when they're not going where you want them to go and this is where line numbers really come in and i've had my grid overlay on this entire time it's really important when you're using your grid overlay which is change colors on me this happens sometimes when things refresh even though it's still set to red here just because it makes it a bit easier to see on top of the purple i'll change that back to red but even if you're not working with it on all the time if you're going to touch your line numbers i highly highly highly recommend that you go ahead and have this on because seeing the line numbers makes it so much easier to work with and so i want it to be on my column four to my column five and we want it from let's go look actually at the figma design i want it to be from the top here and go all the way down to the bottom on this side so to be able to do that let's start with the column so we're going to get this in the right spot so we saw the grid column um property before so i'm saying before we said span two so let's just do that for fun span two just to see that oops we need that and it works it goes across the two like that but in this case i don't wanna be doing a span two i actually wanna say start at line number four so we can actually just put grid column four and it will start at line four and it leaves this one empty why is it doing that what's happening so grid column as i mentioned is a shorthand and the shorthand is for grid column start and my grid column end and basically if i just do a grid column like that for it's just putting it as a grid column start and it's not putting a grid column end just because it doesn't even need to do that and we don't really need a grid column end but just for fun i could put three here and we could say that the grid let's do a start read column start is at three and grid column end is at five and we get the same idea as the span 2. the reason i prefer span 2 when i can use it is because here the span 2 class is working for this one and it's working for this one over here it doesn't matter where they are and even we're going to end up moving this one over in a minute and it doesn't matter where they are where they're lining up span two is just saying doesn't matter where you start but the end we just wanna make sure we're spanning across two columns so this one's a little bit more versatile than locking in with specific line numbers and just like before i said don't create rows unless you need to create rows don't start using line numbers unless you need to use line numbers start as simple as possible and add the complexity as you need to to be able to get the layout that you need so first display grid then my gap then i set up my columns then i go oh i need a few of these to span so i make a very general generic way to span columns i'm not saying you're going from one to three and then oh you're going from four to or two to four or whatever we need that get that one too we actually in this case we can get rid of the end because i don't need to worry about that but we need it to start at four so we need it to be here but i also need it to move up i need it starting at the top so i'm gonna come here and then this is when i'm finally gonna worry about my row so we can do grid row and we can do start on here and where do we want it to start at the top at one oh my goodness it's all coming together so quickly what happened why why did everything just fall into place again start simple start moving things and all of a sudden your layout might come together more than you think and so by saying grid row start one let's take this one off we're doing it's going in the order of the dom so this is the you know what let's choose the third one here um test the mimo and child three background red important i just want to highlight that this is my third one in my dom so it's one two three the third one is going here because that's just following the natural flow that the items will go in first column second column third column it just goes and then goes oh we're out of room i'm gonna go down i'm gonna go to where this guy is and then we get that one and then it sort of moves across from there as soon as i do grid row start one i'm saying i need you your grid column start is four so you're living in this box but i also need you to start at line number one which is the very top so as soon as i do that and i save that it has to live here which means this one can't live there so it pushes down into the next empty cell that it can find and it just automatically goes there even though this is the third one in the dom it's grid smart and you can overlap and actually overlapping content with grid is just it's wonderful but it won't do it by default you have to work at it a little bit to actually get things to overlap so that gets pushed up this falls down over here because that's the next empty cell that was available to it so awesome and i guess we can turn that red off now we don't need that and the last thing is we need this to fill up all that space and you you know these are stretching they look really ugly but as soon as this is allowed to stretch it should fix that problem so how can we do that hopefully you've already come up with an idea or two we can come in with a grid row end and there's a few options i could choose my three because remember we have one here my line number two here or and my line number three down here so i could throw a three and then the layout is done or you might have said well i can do a span and you're right you could you could say expand too and then it's going to start at the top and span across two exact same result there's no difference between them uh so there we go we're spanning across the two of them that way another option is to use the shorthand so instead of writing all of this when you use the shorthand you do grid row and then you're saying where do you want it to start and then where do you want it to end so one over three we'll start at line number 1 and go 2 to 3 or you could do 1 over span 2 and that will give you the exact same result and you can just in this case where you're declaring a starting row using whether it's a span or whether it's something else it doesn't matter too much if you like the idea of this actually being utility class just like i did before you could come in and create something like that i have a grid row span two and do a grid grid row span two and use that in conjunction with a grid row start there's the possibility with things like that that because this is a shorthand it might actually get overridden and you can run into a little bit of finickiness so if i need to do like a specific starting line or a specific ending line or anything like that i tend to declare it on the selector where i'm working instead of using a utility class but if i don't need to declare anything specific that's where i like the utility classes that work based on just where its natural flow is and we're going to get to the media queries in one second i just want to recap a little bit of the simplicity of this and i've gone over it before but first display grid because we need it gap because that makes our spacing and all our life easier there and then set up your columns don't set up rows unless you have to we didn't have to in this case even though we did have to span multiple rows pretty nice and pretty neat and i think makes things a lot easier to maintain and a lot easier to think about we can use spans just to span columns it doesn't matter where things are starting and then if you need to we can do specific things of start in this exact location or start here and end over here and different things like that so always do as general as possible and as generic as possible simplify things as much as possible and then when you need to get very specific then add that specificness to your grid just to get things to fall where they need to but a lot of the time you don't even need stuff like this this is really when you're getting into these weird layouts like this where things are sort of getting a little fancier and next we want our media queries so i'm going to open up responsive mode the shortcut is shift command m um i don't know if that's probably a command shift m i'm guessing if you're on a mac that is in your dev tools also i get asked a lot about this so that's this little guy uh not this little guy this little guy in your dev tools and in chrome this exact same icon is on this side over here so just because i always get asked about this and i mentioned the nice thing with responsiveness in grid so we will do an extra little stage in this that wouldn't really be for this layout specifically but let's fix this at the beginning and this is where i can actually leave everything i've done except for one thing there's a few little things we'll have to do but i'm going to grab this grid template columns i'm going to remove it from here and hit save and let's see what happens um we still have a layout and what i'm going to do is come here and say at media and we'll say a min width of 40m i'm just guessing and let's put in my testimonial grid and we're going to redefine my columns there one thing you'll notice is even though like i just remove this we can see that we don't have anything we actually have a bit of like the same the layout's working even though i haven't declared my columns here but the the column spacing has gotten a little mucked up because it's going to the auto spacing so like this one is narrower like you can see like here we have a really narrow column here we have a bigger column so that's why i do like declaring them the reason that it's just magically working is because of this grid column start if i turn this off the whole thing falls apart but it's going this is my this has to be on the fourth column so that means i need to have four columns for this to work and then everything will just sort of slot into those empty spaces so that's why we sort of have a layout right now but what we're going to say is actually let's put it right here my media query and then i'm going to grab this and also put it inside the media query and now we have this at my large screen sizes and then i think we should change where that's happening at um and actually i'm going to bring this up to a 50 because it was getting a little bit narrow there and we can see there we go look at that it's going and then it's working except it's not really working because these are still spanning too and this would depend a little bit on your layout but i think most of the time your spans are going to be happening once the grid is sort of more defined and when things are kicking in so i'm also going to bring that utility class here this isn't the most organized css at the moment but just to say we want to start without any spans without any columns anything like that but i'm still using my display of grid at the small screen size because then i have my gap and all my spacing is there and actually let's just turn off the inspector thing now um so yeah just just for the purpose of having that gap i think that's wonderful and then we get to our larger screen size and then we get our columns and everything falls in and then we go back down that way and so that works really really nicely and it's just about keeping things organized within your media queries where you need them to be there are ways of working without media queries with you might see it with like a repeat autofit and other things like that that are actually fairly easy to use but on a layout like this it just it doesn't work and i don't want to dive into it because we're just adding we're keeping grid simple today hopefully this is still keeping it very simple for you and moving things into the media query hopefully doesn't throw you off too much there but again all of this code if you want to look at it in more detail the github repo is linked below and you can access all the code there now the last thing i want to talk about that i find actually simplifies things with grid a little bit uh and it's a way that i used to not want to work at all but i find when it comes to media queries and all of that it makes grid just wonderful it does take a little bit more setup but i find it's a nice easy way to work with grid when you have more complex layouts like this in doing this we're also going to explore a few other properties that we haven't looked at yet and so what i'm going to do is i'm actually going to come and i'm going to delete all of this i'm going to delete i'm going to leave the media query because we are going to need it but i'm going to delete all of that and we're left back where we started with our display grid at the very beginning and this is just another approach that's why i'm breaking it sort of into two but it's one of my favorite ways to work with grid uh the way we just looked at i think is the best way to understand how grid is working and the simple ways of setting up a nice simple grid this is when you need more complex layouts with a little bit more happening where things change a little bit more so we're going to break away from the actual design as well a little bit with this one and what i'm going to do is actually set up some grid template areas and with grid template areas the syntax of it's a little weird but i always always do it where i put it onto its own line because the grid template areas tend to get a little bit complex and we're gonna see that once we get to the media query it's gonna have a little bit more going and it's also kind of weird because it does all go in strings but i'm going to write one here and then i'm actually going to go on a new line and in quotations it can be single or double quotations 3 4 and five and i always forget my semicolon at the end so just don't forget after the last one you do need a semicolon and let's hit save and let's see what that's actually done because this has done something even though we don't see a difference yet and to be able to see it once again we'll open up our visualization tools on my grid so we can open the grid here and i have line numbers enabled so if you don't see the li uh line areas my area names are enabled so it's within the layout tab this is in chrome and in firefox chrome it's these little little tabs that show up here whereas in firefox they're really just in your face so i like the in-your-face ones a little bit better and we can see we have one two three four and five at the bottom now what's the point of this let's go down into my media query and here we're going to write test demonial grid and we're going to say grid template areas and we're going to redefine them so let's come here and what we're going to say is we're going to have we're going to match the design for now so it's a one one and five right and let's go back into figma and so if you remember in the markup this is one this is number two then this is number three this is number four and then this one is number five and again draw things so we have five here and five here four there four here let's make that four all in white and we have a one there and a one here so we have area one one two five and then we come down to this next row three four four five so i can write that and i usually don't number it like this i actually give them meaningful names but um so that was uh three four five uh four four five four four five and that was one one it wasn't one one five one one two five there we go two five and we look at here what it did is it made one row for each of these so every set of quotation marks is going to be a row and so here we just had one by itself two by itself three by itself that's exactly what we see right now one two three just like we have one two three four five here every set of quotation marks here is the row and then within this row i'm creating different columns and for each one of these columns i'm giving them a name and so let's hit save and look at that some magic happened but you'll notice it's not using the area as well but here we can see i have one one two five five continues down here four goes across these two and three is here and i'll even notice it puts these like solid red lines around the areas to highlight where they are in the visualization tools whereas here like between four and four there's no solid red line so it tries to help us show us where things are so that just means we need to use these grid areas and again is this more setup yes it definitely is more setup and but i just find it works so well once you've taken the time to do this um i'm going to use this because of the way the layout is with the nth child selector a lot of the time i'm doing this on a component that has like you know it might be your name your name your role a description and image so you can choose those selectors that you've already made in those classes and be applying all of that to those but what we'll do is we'll come here we'll say and i'll set this up really fast so we'll fast forward for a second okay so i've set up my nth child selectors and each one is my testimony of child so my first child second child third child fourth child and my fifth child and then to place something on a grid area you just want to come in and say what grid area they should be living on so my first one should be living on grid area one and you'll notice here it's not a it's not in quotation marks and this is something i think gets some people caught off guard here they're using one uh here we're setting everything in like a string type of thing it's in quotation marks here you don't use quotation marks just to be aware of that and we can do a two and then we can use a three and we put a four and then we can set a five here hit save and my layout comes together there's one issue with it but look at that it's come together and then we can shrink that down and it pops over and then comes back and what i really like about grid areas is check this out let's take this guy copy them and paste them and maybe we do this at 30 rem instead so we're going to create two different ones and we do one one um let's do one one then we'll do a two five a three five and then a four five and hit save and so now let's go all the way down they all stack on top of each other just like we had it then i come to here and i get my one two five three five four five it doesn't really work with this layout but you can see it's going or so maybe we do four four then across the bottom and we get that there we go so we get this layout like that and then we get to a larger layout and then it goes that way and you could just change the layout how you need to at different screen sizes so easily and what i really love with this is i'm only worried about the parent i don't have to re do anything on the children this is the children i set the grid area they live on i never have to worry about it again which is just so magical and for this to be working at this stage all i've done is display grid a gap and a grid template areas and then i'm just redefining the grid template areas for each one and with the visualization and seeing oh i have a good area here i have the grid area here i find this so easy and so simple to work this way and i don't even need spans because i'm saying that my one let's go find them my grid area one you're you're living on grid area one and grid area one is going across two different columns so it's going to span those two columns it's wonderful now you might have noticed we ran into that issue i talked about when i deleted my display when i deleted the grid template columns that i'd originally set up with that repeat syntax where the columns are different sizes this one's really small and then this one's bigger just because of the way the content is distributed and it's doing its automatic thing to make it work which is cool and maybe that's happy and maybe this is exactly what you need but if you do want to ensure that you have columns that are always the same size and you're not actually setting up any columns we can do this in one spot and then never have to worry about it which is coming here and saying grid auto columns because these columns are automatically being generated based on my grid template areas so it's grid auto columns and then you say what size you want them to be and that means any automatically generated column and you can do the same for rows any auto automatically generated column will be 1fr so if i hit save now each column is the same size we get nice even columns and the layout becomes a little bit more balanced and if you really like this grid template area's approach of working but you want to see it with an example where i'm not using nth child and i'm actually doing it in a bit more realistic of a situation perhaps there's a video here for your viewing pleasure that you can check out where i dive a lot deeper into that and with that a really big thank you to all of my patrons for their monthly support i can't do it without you guys and until next time don't forget to make your point on the internet just a little bit more awesome

Channel: Kevin Powell

Views: 92,667

Keywords: HTML, CSS, kevin powell, css grid, tutorial, css grid tutorial, css grid easy, css grid simple, learn css grid, the easy way to learn grid, grid layout tutorial, understand grid, simplify css grid, css grid template tutorial, grid website, grid tutorial for beginners, grid for beginners

Id: rg7Fvvl3taU

Length: 37min 3sec (2223 seconds)

Published: Thu Nov 25 2021