Learn CSS Grid in 20 Minutes

in this video we'll go over the basics of CSS grid layout thanks for checking out this video we're going to go over the basic grid properties if you're just starting or even thinking about starting a career in web development you're in the right place I upload new videos every week hit subscribe in the Bell to get notified and stick around to the end for some extras I'll show you how to animate grids if you watch my flexbox video you'll understand a lot of these concepts already so if you didn't watch that one be sure to watch it after this one I'll put a link in the description and at the end of this video it's important to learn flexbox as well because flexbox and grid actually work very well when used together as I'll demonstrate at the end with grid it's easier to layout websites without having to use floats and positioning grid is very powerful compared to flexbox flexbox is for the most part one-dimensional you can choose to flex either the row or the column but grid is two-dimensional meaning it can handle both columns and rows at the same time so let's look at some terminology before we get to the code so with grid we have to have a container wrapping our grid items now there are rows and columns in grid but they are defined by the lines now this part is one of the more complicated to understand so I'll take a little bit of time to explain this one and if you can wrap your head around this concept and understand it completely then you'll be all set so in the columns there is line one which is all the way on the left side line 2 line 3 and line 4 in the same with rows line 1 is all the way at the top 2 3 & 4 so these lines are how we define the grid so if we wanted this block to span to grid cells we would have to tell grid to start at line 1 and end at line 3 so we'll go over this in a bit just take a mental note here of how the lines are set up and we'll come back to this so each block is a grid cell and think of this like an Excel spreadsheet so you have cells we can also merge cells so it's a very similar concept and then in grid we have tracks so there are rows and columns but we call these tracks so a track would be this entire bottom row would be a track the middle column would be a track and so just understand the terminology here if you hear the word track that's what it's referring to it could be the entire row or the entire column and lastly we have areas so we can define an area that consists of multiple grid cells now an area always has to be either a square or rectangle we can't have an odd shape like an L or anything like that in the current state of CSS grid all right now let's look at some code so I've got some setup already just a basic HTML document and in the body we have a div with the class grid container and then we've got five grid items and they're each individually named item one two three four and five in the styles I've got some basic reset properties here have added a height and a border to the grid container and some coloring and padding to the grid item and nothing currently on the individual items so to create a grid the first thing that we'll need to do on our grid container is to display it as a grid so we'll add display grid and I'll save that and you'll notice that it's somewhat changed but basically it just stretched everything out that's still laid out the same as it was so the first thing that we should look at is defining our columns so we can use grid template columns and we can type in any unit of measurement we could use percentage pixels so let me just demonstrate that let's just do 200 pixels we'll save that and that creates one column 200 pixels wide if I wanted two columns I could do the same thing 200 pixels and that creates two columns and I could add another 200 pixel column and you'll notice that it's now going off the page I do have this zoomed in so that's why it's going off the page at only 600 pixels so this may not be the best way using pixels we could use percentage we could say 20 percent and that's a little bit better so we should probably talk a little bit about explicit versus implicit values so there are values that we can explicitly define and then there are values that are automatic or implicit so what we're doing here is we are explicitly defining the widths of the columns and now you'll notice that we have more items here than columns and so what it's doing is it's automatically wrapping those extra items down to the next row and applying the same column template to every subsequent row so to better demonstrate that let's use some different values here let's do 50 pixels 100 and 150 so now every row takes on this pattern for the columns now a better way to define this is using fractional units so we can do one fr one F R and one F R and that takes a fraction of the available space and divides it equally if we have one one and one if I wanted the middle one to be to the middle column is now twice the size of the first and third column another unit that we could use is Auto so we could use a mixture if we want the middle one to be 100 pixels always one fraction at the beginning and then Auto at the end and then if we want all three to be the same we could use repeat and in repeat it takes two values the first value is how many times do you want to repeat so we'll say three times and then the second value is the size so we'll save one fr so if we wanted 12 columns and all of them to be 1 fr we don't have to type 1 fr 12 times we could just do repeat 12 1 fr okay so now if we want to define our row sizes currently the rows are stretching to fill we could use grid template rose and here we can define our rose in the same manner as we do columns so we could say 200 pixels 200 pixels and now we've explicitly defined that the first two rows are going to be 200 pixels so now back to the explicit versus implicit values we've explicitly defined the first two rows are going to be 200 pixels now what would happen if we had a third row let's change this let's bring this down to two columns and let's see what happens when we have a third row now this third row is larger than the first two to make it a little more apparent let's change the first two to 100 so now you'll see the third row size is being automatically determined or implicitly defined so now there is a way that we can predefined what any subsequent row should be and that would be grid Auto rows and here we could say the first two rows we want to be 100 pixels but every row after that we want to be 200 pixels and so to demonstrate that let's change this back to one column let me zoom out just a bit so now you can see that the first two rows are 100 and every row after that is 200 let me change this back to three and zoom back in so we can do the same thing with columns if we defined that item five needed to be in the fifth column then we could use grid auto columns to define those columns that are not predefined and that'll make more sense in a bit when we get to rearranging items so now let's talk about positioning items within its grid cell so for horizontal positioning we could use justify items and we could set that to Center and so that centers each item within the cell so to better demonstrate this I can open the dev tools in chrome by pressing f12 and then if I hover over the grid container Chrome will show us our grid so we can see now that after adding justify items each item has now been centered horizontally within its grid cell by default it's stretched and we can set this to start and notice that this is not flex start its just start and we can set it to end and then the default is stretch we'll leave it at center so to vertically position the content we could use align items and let's set that to center and I'll hover over the grid here in the dev tools and you can see that each item is centered horizontally and vertically within its grid cell so we could also set this one to start or end we'll leave it with at center I'm going to turn the dev tools off and now we can also align the entire grid within the container alright so let's get rid of these so to better demonstrate that let me change the widths of these to 150 pixels so now you see we've got some extra space on the side so we could use justify content and that will align the content horizontally within the container and we can set that to center or start end so we'll change that back to center and now to align the content vertically we can use align content and let's say Center and again we can change this to start and these also have the space around and between and evenly and we can do the same thing with the justify content with the space around between or evenly all right so let's get rid of these and we'll move on to the next property and I'm gonna change this back to one fr and now you'll notice that all of our items are right up against each other there's no room in between so we can add grid row gap and we can set that to 20 pixels and now we have a gap in between our rows you can do the same thing with the columns of grid column gap we'll set that to 20 pixels so now we have even gaps in between our columns and rows and of course there's a shorthand for that and that would be grid gap and with grid gap we first specify the row so to make this a parent we'll do 10 pixels on the row and then 20 pixels on the column so I'll get rid of those and save so now you see 10 pixels between the row and 20 between the columns and if we want the same on the rows and columns we can just specify a 1 value and it will add 20 pixels in between the rows and columns all right so now let's take a look at our child elements okay now this is where the line numbers that we talked about earlier come in so on each item we can specify where we want it to layout within the grid so we could use grid column start and we could say we want it to start on line 1 which is all the way to the left and then we could spit specify grid column end let's say that we want item 1 to span 2 grid cells so that would be line 1 2 3 so we want it to end on 3 now I'll save that and you'll see now grid item 1 spans two cells and then it automatically places the other items to fit so now let's say we want adam to to span Row 1 and Row 2 so here we could do the same thing with grid row start and let's set that to 1 so we want it to start on the first line of the row which is at the very top here and then we want it to go to rows so that would be 1 2 3 so we want to do the same thing on that one so grid row end 3 and now it kind of messes up here because we haven't specified a column and it's assuming that we want to start on the first column so we will need to specify that on item 2 we'll specify a grid column start and we need it to start that on the third line and then grid column end would be the fourth line and now it looks like what we intended okay now we can consolidate this code and we could just use colum will put the start value a forward slash and then the end value and that would be the same as these two lines here and we can do the same here with a grid row start end and grid column start end right so that's the same thing and so now let's say we want Adam 3 to span these four cells here all right so let's go to item 3 and let's say grid row we want that to start on the 1 to the second line of the row and we want it to end so 1 2 3 4 on the fourth line of the row and now we'll do a grid column and we want that to start on the first line of the column and we want it to end on column 1 2 3 column line 3 so we'll save that and now what we can do here is instead of specifying the end column line number we could actually say span 2 so we want it to span two rows and the same with this one we want this to span two columns and that's the same thing let's say we want to span three rows and there we go now there is actually one more property that will consolidate this even more and we could say grid area we could specify the row start and then column start so it uses the start values first so row start would be one column start would be three and then we have the row end which was three and the column end which is four so you just have to remember roast our column start row and column end I delete those it remains the same and we could do the same here we could do grid area and we would say row start - column start one row end span 3 and column in span 2 save that and it's the same so now we could have elements actually overlap other elements so let's go to item four and let's put item four to a grid area we'll start this on the second row line and the second column line and we will span two on the row and span two on the column all right so now you see that four is actually overlapping three and two what we can also do on here is we can manipulate the Z index and we can bring item two on top of item four so if we go up to item two we could set a Z index and save that and now you'll see that item two is on top of item four so with grid you could create a mosaic layout all right let me get rid of these items and we'll go back to what we initially started with so we went through on how to align the content and align the items but what that does is it aligns all of them the same way so if we want it to only align one of the grid cells and we could use justify self let's set that to Center and we could use a line self and we'll set that to Center so now item two is centered horizontally and vertically within its grid cell in it will accept the start and end values as well and of course the shorthand for that would be place self and we could say Center Center and you see that's the same and we could say start Center and so the first value here is the align property which is the vertical and the second value is the justify property which is horizontal all right so let's take that out go back to what we had so I'm gonna get rid of all of this for now so there is another way that we could lay out the grid and it's a little bit easier you don't have to use the line numbers we're actually going to name everything so we would use grid template areas so what we'll first need to do for this to work is we'll need to go down to our items and we'll need to add a grid area again and this time we're going to specify a name so we'll just make it easy and we'll say header for item 1 and then we'll set a grid area and we will make this one nav and then a grid area and make this one main and this one will be ads and then footer and to make those easier to see let's let's add those names in the HTML as well okay so we've got all of those defined now in our grid template areas within the container we can now lay it out more easily and what we'll do is actually use quotation marks and just type in what we want so on the top we're gonna want the header so we'll say header and we're defining the columns as we go so if we want three columns we would type header three times and then we'll define our next row which we will want nav main and then adds and then our next row we want the footer and we'll need to type that three times for it to go across the entire width of the grid all right let's save that so now you can see we have header footer at the tops and bottom nav main and adds so now let's define our rows so let's add back the grid template rows and let's say we want the header and the footer to be much more narrow so let's set those to 60 pixels everything in between one fr and then 60 pixels so we're setting the header row here to 60 pixels nav main and adds will be one fr and then the footer would be 60 pixels as well and so that looks a little bit better so let's also define our columns so let's add that back grid template columns and let's say our first column which really is the nav let's set that to 20% and then the main we'll set that to 1 fr and then the adds let's set that to 15% and that looks a little bit better so you can actually lay out your website with a grid and of course this will be responsive so now with CSS there's generally shorthand for just about everything so we can actually retype this with a different property and we can just use grid template now with grid template we can combine everything so let's go down here and let's put our header back in so the first thing that we're defining here is our rows okay so we're going to define our rows with our area which is the three headers and then we will define the height of the row so that was 60 pixels and now we can go down and define our next row which was the nav main and adds and then the height of that was 1fr and then we have our footer and that was 60 pixels and now to also add our columns to this one property we will separate our row values from our column values by a forward slash and now we can input our columns and so we had those set to 20% 1fr and 15% so now we have combined all of this into this so I'll go ahead and delete all of these and I'll save it and you'll notice of course nothing changed so let's just change these to 100 so that you can see that it is working and there you go so if we wanted to add an empty space for some reason we could make this four columns and let's say that we want a empty cell in between the main and the adds we could just add a dot and so let's now define that new column and let's define that as 50 pixels we'll save that and now you'll see that we have a blank cell here so I've got two added bonus here for you I'm going to show you how to use flexbox along with CSS grid and how animate your grid so in the HTML here I've got a wrapper class and then sides and we have two sides so we have the robot side and the alien then we've got the name and the emoji in each of those and then we've got this versus class with a span so let's go over these styles so in the HTML I've got just some resets here and then on the wrapper we've got the height set to a hundred percent overflow:hidden display flex justify content and a line item Center so on the wrapper we're using flexbox to Center the content perfectly in the center now on the sides we are positioning the sides relative because I need to position this versus div on top of and in the center of our grid this video isn't intended to cover how animations work so I've got this animation set up here and then we're displaying the sides as a grid and then we're using our grid template columns and we're setting the columns 250 of the view width each and then we've got our custom bounce animation and again we're not going to cover animations but what we're doing is we're animating the grid gap so we are changing the gap in between these we're starting at 0% we're starting at a hundred view with so that's why they are completely apart from each other because the gap is the entire view width so let me refresh that again you'll see the entire view width and then the gap eventually once we get to a hundred percent of the animation the gap becomes zero all right so then we're displaying the sides as flex but as a column and then we're centering the content and we've got a font size on the robot we've got some colors there and on the alien some colors but on the alien we've got a flex direction of Colin reverse so in the HTML we have the name and then the emoji for the alien we also had name and then the emoji but I'm specifying column reverse so it's swapping them all right and then we've just got some basic CSS on the name and on the emoji and then on the verses like I was saying before we needed the container to be positioned relative so that we can position the versus absolute and get it aligned right in the center here and I'm not going to go over positioning in this video but we're positioning it in the middle and we are also displaying it as flex and aligning the content center so we've got that vs. right in the middle and then we've set our border radius to 50% so that it will become a circle and we set our colors and then we needed to do some rotation to get these colors to align perfectly on opposite sides and that is how you use flexbox and CSS grid together along with a bonus animation all right so before you go if you like this video a thumbs-up is appreciated I upload new content every week so hit subscribe in the bell to get notified and let me know in the comments below if there's anything that you didn't understand or if there's any other topics in CSS that you'd like me to cover and if you think this video or any of the videos on my channel might be helpful to someone else please share them i'm also on twitter and instagram at code stacker if you haven't watched my flexbox video be sure to watch that one next I'll put a link on the screen and in the description below thanks for watching

Channel: codeSTACKr

Views: 131,669

Keywords: learn css grid in 20 minutes, css grid tutorial, grid css tutorial, css grid crash course, how to use css grid, learn css grid, css grid layout tutorial, grid in css, css grid, css grid layout, css grid tutorial for beignners, css grid template tutorial, grid css, grid layout css, what is css grid, css grid website layout tutorial, grid website tutorial, grid, responsive css grid, responsive css grid tutorial, responsive css grid layout, css tutorial, css flexbox tutorial

Id: 0-DY8J_skZ0

Length: 27min 40sec (1660 seconds)

Published: Fri Aug 02 2019

Reddit Comments

[u/codeSTACKr]

I just hit 300 subscribers on my YouTube channel!! On the way to 1000..

Here is my latest video. This one goes over the basics of CSS Grid. I hope this helps at least 1 person. I appreciate any and all support. Thanks!

[u/XGnome]

This is a great intro. I've been putting off learning CSS grids because I've been able to make flexbox do what I need it, but I can certainly see the benefits of grids. Thanks for taking the time to do this.

[u/ryno]

Covered all the basics... great vid!

[u/frogworks1]

🙌🙌😃

[u/Devstackr]

:)

[u/Simplycoconut]

Have you tried Firefox's built in grid support?

[u/Sweecks]

Good job man. Keep on with this tutorials.