Learn CSS Grid in 20 Minutes

hello everyone my name is Kyle and this is web dev simplified we make the web easy to understand and accessible for everyone in this video I'm going to be discussing everything you need to know about CSS grid I'm going to start by talking about what CSS grid is go into when you should use it and then finish up with going over all the syntax for CSS grid so let's get started back the easiest way to get started with CSS grid is to compare it to what its most similar to which is flexbox flexbox i've already created an entire video on so if you haven't seen it make sure you check it out so that you can continue watching this video so flexbox essentially it's just a way to layout things in one dimension so that they're flexible and they can change their size dynamically based on the content inside of the flexbox container grid is exactly the same and that it allows you to lay out items flexibly inside of the container but it allows you to do it not in just one dimension but in two dimensions it also allows you to line up items within those dimensions both vertically and horizontally just like flexbox does and is essentially flexbox but for two dimensions instead of just one dimension it's incredibly powerful but difficult to wrap your head around due to the complexity of the layout mechanisms so we need to talk about a little bit of terminology first before we can continue further the first thing that I want to mention is that you have a great container just like you do in Flex box this container is the object that wraps all of your different grid items so in this picture the container is the square that wraps all the different objects inside of this grid then inside of that grid container we have different grid items which are all these multicolored boxes of different sizes they're all items inside of the grid they just have different sizes and take up different positions inside of the grid we then have the gaps between our items which are called grid gaps and then we also have our lines for our rib tracks which are these dividers that you see between all of our different rows and columns that our grid is composed of so now that we have that basic terminology out of the way let's get started with creating our own grid in here I have a Visual Studio code open with a project which is some basic background styles and nothing inside of it was open that with bio server as you see we just have this background and we can get started by creating a container to wrap our grid items in so let's credit div I'm gonna give it a class here of grid container and inside of that we're going to want to put a different grid items so we'll just quite different grid items give them a class grid item it will also give them a class of which number they are so they can easily distinguish them so we have grid item one let's do great item two and grid item three and if you say that you see that we now have these different items showing up on our screen so they're easy for us to visualize we have no styles being applied to them other than the visual styles themselves so to get started and create a grid we need to open up our Styles dot CSS and we need to display grid for our grid container so we select our grid container and in here we just put display grid if you save that you'll notice absolutely nothing changes and that's just fine grid by itself doesn't define any rows or columns for us to work with so by default it just looks exactly the same as normal divs inside of a container what you need to do to make grid become an actual grid is to define specific columns or rows for your grid so to do this you'll use grid template and then you'll say columns if you wanted to find your columns and in here you put a list of all the different column sizes you want you can use percentages pixels am sorry Ms whatever you want to define your sizes so for example if we wanted to have a 200 pixel calling and a 100 pixel column we say that you see we have a 200 pixel column on the left and a 100 pixel column on the right and then our grid perhaps to the next row where it has another 200 pixel column so our grid is essentially two columns wide and it has a 200 pixel column and a one higher pixel column but what if we wanted our columns to flexibly size themselves based on the items inside of them that's where we used what's called the fraction unit so instead of a 100 pixel column let's say we wanted this to be one fraction of our size and instead of 200 pixels we under this to be two fractions this works exactly as flexbox does for Flex grow and that the 2fr is going to be the same as a Flex grow of two and 1fr will be the same as grow of one so essentially 2fr will be twice as much space taken up as one fr if you save that you see that our items on the left here in our first column are twice as large as the items in our second column and that's because of these fr units that we defined another thing that you can do with grid when defined in your actual columns is to use a repeat so if we wanted to have for example four columns so there were all 100 pixels what instead of writing out 100 pixels four times we can just use the simple repeat command inside of the repeat we just put how many times you wanted to repeat and we put how large we want that size to be if we say that we now get for 100 pixel wide columns if we go in here and add a few extra grid items you'll see that we have for 100 pixel wide columns and this one wraps on to the first column when we get to the fifth item that's exactly how we want it we can also do the same thing for our rows so we can do grid template rows instead of columns and let's say we want to have a 200 pixel tall row for our first row and we want our second row to be 150 pixels tall if you say that we now have a 200 pixel rule for our first row and 150 for our second row but if you don't know how large your grid is going to be so you don't know how many rows it'll be you can use what's called grid Auto rows and this will determine the size of all rows that get added after our template rows so for example we can put in that we want all of our rows to be 150 pixels tall so if we delete this template rows here and say that now all the rows that aren't defined which in our case we have no defined rows so all of our rows will be 150 pixels tall if we add back in that grid template rows and we make our first row of 200 pixels but we don't define our second row it'll just default to this auto row of 150 and as you can see our first row is 200 and our second row is 150 let's change our columns back here to be 200 pixels and 250 pixels just so it's easier for us to see we'll get rid of all these things for our rows and save that and now we have our nice two column layout and let's add some content inside of our different grid items to see how they scale with different sizes content inside of our first one here let's just add a little bit of text we'll say 50 words here instead of our second one what is that 25 have you saved that you see that this first grid item is much longer than our second grade item and our second grid item just grows to fill that amount of space which is exactly what we want but let's say instead of our Styles here we'll add our grid Auto rows back in and let's say we had to find our rows we want them to be 150 pixels tall have you saved that you see that our text just overflows outside of our grid item which is not what we want we want our grid item to grow to that size but be a 150 pixels minimum so we can use what's called minimax to define what we want our minimum size to be and our maximum size for our content to be so we want our minimum row size to be 150 and our maximum the auto which means it'll just fill the amount of space it needs to put its content if you say that you now see that our first row fills the amount of space it needs to put that content and our other rows are that 150 pixels tall since they have no content to fill the extra space and that's exactly what we want now let's remove that content from here so we can see our view a little bit better I never go we got a rose back home exactly like we want and now we can talk about spacing our rows and columns apart from each other we can do this with the grid gap property so we have the grid row gap which returns the space between our rows what's for example putting in here 20 pixels if you say that we now have 20 pixels between all of our different rows instead of our grid we have the exact same property for call so for example we can put 10 pixels between all of our columns you'll see we now have 10 pixels between our columns and if you want the same value for both the row and columns you can just use the gritter gap property which sets both the column and row gap to be 20 pixels in this case and now you see we have 20 pixels between all of our different grid items on the rows and columns and that's for the most part all you need to know about sizing your different columns your different rows and your gaps there's only one other way in which you can lay out your and rose and that's using grid template area grid template areas allows you to create different strings for the areas that you want your different coach take up so in our case let's say we want to have a header and another header so we want our header to take up the first two rows just like this and then we have one of our grid items or say grid item one in this case we can give it a grid area of header now if you say that you see that this template area our entire first row is going to take up the space of this header we can even define further rows after that so let's say we want our next row to be sidebar and then content and then again sidebar content so we can use our grid item two here we can set this to be a sidebar for the grid area let's do the same exact thing for a grade item three except for edit we're going to make it the content and now if we save this you'll see that we have our sidebar on the left side here and our content on the right side here so these grid template areas allow us to name our different items based on an area and then position it in our rows using the template concept so we lay the roads the areas that we want for each row so for example column one will be header column two will also be header so it'll span both of those columns our sidebar will be in column one for both Row two and Row three and so on so it'll follow the template columns and rows we have setup and it will put these objects in the different areas that we've defined this is great for when you want to reposition elements on different sides of screens or shrink or grow elements based on your screen size but it's not something that I used very often when I'm creating grids because I prefer to style my element using grid column and grid row on the elements which we can talk about now so let's remove these template areas and these areas for our different items and we can do the exact same thing of spanning across our different columns by using grid column start to determine which column the grid item should start in so in our case we wanted to start at the very first column so we'll just put one in here and then we could use grid column and to determine where we want this grid column to end and you may think that we want to put two in here because we want it to end in the second column but the way that the columns work and the rows work in our grid is a bit different on the right here you see that we have our very starting column which is on the far left this is column one our second column is actually this break between column one and column two so our second line is right here in between grid item two and three and then in column three is actually the line at the very end of our page because each column that we have each section has a start and an end so if we started at one and ended at two we would just be covering up this first section and if we want to start at 1 and go to the end of the line we'd have to use a column end of 3 here maybe save it you see that now we still spam the full header which is exactly what we want if we were to change this back to 2 like we had mentioned earlier you see that it only covers this first grid area another way to do this just to use negative 1 which will span all the way to the very end of the column and there we go you see that it goes all the way across the row since negative 1 corresponds to the farthest away column on the right side of the page you can even shorten this further by using the grid column property putting our start at the beginning using a slash and then putting our end at the end here have you say that we get the same exact thing as using grid column start and end separately we can do the same thing again for our rows so for grid item 2 let's use the grid row start now we want to start in the second round here so two and then we want to use grid row and we want to end in the fourth row just like I had mentioned earlier if we end in the third row it'll only fill one slot we want to go to the fourth row so that it'll fill two spots and we want to do that for both of our grid items here we saved that you see that we now give that same layout we created with the template areas this is incredibly useful for creating layouts that spend different sizes of our call also you can use the spanned property so if we wanted this to span two columns and we could just say spam to have you say that it will now take up two column with same thing down here with our grid rows we could change this to be spam to and now to just take up two rows and same thing down here there you go now our properties our items are spanning two rows we could even change this to be spam three for example and now this grid item 3 is spanning three rows or even just span one which is the default which means that it's only gonna take out one row space same thing with the column span one is the default which means that it just takes up one column and one row by default so now let's remove all these different grid column layouts here that way we have our grid back to how we want it to be and that we can start to talk about how we can align our grid container and our grid items inside of our container this works very similarly to how flexbox works for aligning items using the line items justify items so in our case there's two types we have the items and the content version of a line and justify so there's a line items and justify items which is how we lay out the different grid items inside of our container and then there's justified content and a wine content which is how we lay out our actual grid container inside of the container that that's inside of so let me show you an example by justifying our container and a wine in our container so we'll use justify content which is what is going to contain our container and make it move around and we'll just say Center for example if we want our grid to be in the center on the horizontal axis if you say that you see that our grid is now in the center and if we increase that you see it a little bit easier if that it's in the center of our screen we could change this to bead and this start for example and notice how we don't use flex start that's only for flex box and grid we just use start or end for example and if we want it to align our grid inside of our screen we could use a line content and we can say Center for example and we also need to group our grid a height so it can align itself inside of that so we'll just say the height should be 100 view height so take up the full screen and you now see that our grid is centered vertically and it's right lined horizontal so now we can do all the different types of alignments that we could do it Fox barks inside of here so we could you stretch for example and it'll stretch our grid to fill the full size we do the same thing for justify we could make it stretch as well but since our grid items can't actually grow this won't change anything we can even do like spaced around for example spacer items around like that and so on for all the different types of justifying of our content that we want to do next we can look at justifying the items inside of our container so let's remove all of the content justifications we have save it so we know what we're starting with and now if we wanted to justify the items inside of our container we could say that we want our items be centered inside of their different rows and as you can see now the items are perfectly centered inside of their corresponding columns and if we wanted to Center them in the row will use align items of Center and this will now Center them inside of their different rows which is perfect it can also change this to be start for example and it'll be at the top of the row and for the bottom of the row and so on and we can also do the same thing with justified for example and by default these are both set to stretch which is why you see that our sizes on our things look like this when we have no just a fine of our items and these properties can be overridden on the different elements inside of our grid so let's say we wanted to take art first great item great item one and we wanted this one to be aligned at the top of the row we could just say a wine silk start if we say that you now see this is aligned at the top of the row and everything else is a winding stretch we could also override justify so we could say justify itself and we want it to be in the center and there we go you now see that it's aligned itself in the center horizontally and that's how we can override any of the different justify properties or the align properties on the individual good items and set them on our container using justified items and the line items this whole aligning and justifying of containers and items works almost exactly the same as a dozen flexbox so again if you haven't checked out my flexbox tutorial make sure you check that out for more in-depth explanations on these justify and a-line property and that's everything you need to know in order to get started creating grids using CSS it's very similar to how flexbox works but it allows you a lot more in the way of laying out your elements due to the beam in a 2d nature as opposed to a one dimensional nature Fox box and grid were designed so that they would work amazingly together and using flexbox containers inside of your different grid items is one of the best ways to layout a site in my opinion and luckily support for grid and flex box is nearing almost perfect in all modern browsers so you can use this on modern sites and not have to worry too much about supporting older browsers unless you're trying to focus on Internet Explorer 11 for example which does not support grid Foley I know this was a really quick overview of everything that you can do in grid so if you're confused with anything or want further clarifications just let me know down in the comments below and I'll make sure to get to you with an answer to any of your questions thank you guys very much for watching this video and if you did enjoy it please make sure to leave me a like and subscribe down below for more tutorials in the future thank you guys very much for watching

Channel: Web Dev Simplified

Views: 228,742

Rating: 4.957427 out of 5

Keywords: webdevsimplified, css grid tutorial, css grid template tutorial, css grid website layout tutorial, what is css grid, css grid, grid layout css, grid website tutorial, css grid layout tutorial, css grid layout, responsive css grid, responsive css grid tutorial, responsive css grid layout, grid in css, css grid vs flex, how to use css grid, can i use css grid, learn css grid in 20 minutes, grid css, grid css tutorial, css grid tutorial for beignners, grid, learn css grid

Id: 9zBsdzdE4sM

Length: 18min 34sec (1114 seconds)

Published: Sat Oct 27 2018

Reddit Comments

[u/MetalslugSNK]

Thanks for sharing, i love quick guides