CSS Grid Layout Crash Course

[Music] hey what's going on guys so I've been getting a lot of requests for a CSS grid tutorial so in this video we're going to cover all the basics of the new CSS grid layout feature which allows us to create two-dimensional layouts on a web page and align items in both columns and rows all browsers now support the grid layout as of March of 2017 so let's go ahead and dive in and take a look at CSS grids this video is sponsored by dev Mountain if you're interested in learning web development iOS or UX design dev mountain is a 12-week design and development bootcamp intended to get you a full time job in the industry to learn more visit dev mountain comm or click the link in the description below alright so a lot of people are asking what the difference is between flexbox and grid and I'm not going to go through the specifics of this I don't even have enough information to do a full comparison I will do some research and create a video on it but basically flexbox is for one-dimensional layouts in columns or rows and the grid is for two-dimensional layouts for columns and rows so I think that this is a really nice visual representation of the difference so one dimension verse two dimensions so with Flex blocks we basically have some columns and they're aligned in a row okay with CSS grid we have some columns and rows and you can see that this column here actually has some rows on the side of it okay so it's aligned with multiple rows and it just gives you a tube two-dimensional effect now you can achieve this kind of layout with Flex box but it's done in a much different way you'll have multiple flex items with all kinds of alignments and so on but with CSS grids this is all one grid okay you're a lot you can do this just by having one grid and I'm not going to go too much further into it than that but just know that flex box is one dimensional layout CSS grid is a two dimensional layout all right so let's jump in here now I'm using the atom text editor and I'm using a plug-in called atom live server which just allows me to run the file on my local host over here and what I have is a folder called CSS grid with an index.html file with just some very basic markup in it to get us started okay I'm also using an atom plug-in called Emmet which allows me to do shortcuts to quickly create you know div tags and other HTML elements so you may see me use that along the way now the first thing we're going to do we're going to start up very simple and we're going to create a layout with a main column and a sidebar so that's something that's very simple also very common that you see on websites and applications so what I'll do is in the body here we're going to create a wrapper class okay now you don't have to call it wrapper you can call it whatever you want in fact a lot of people will call it a grid because it is a grid container or container or whatever you want to call it so inside this wrapper we're going to have two divs one for the main layout one for the sidebar so let's go ahead and create a div and I'm going to put some text in here now atom allows me to do larum let's say LARM ad tab and that will give us 80 words of Teck of dummy text okay so I'm going to create the second div and in here I'm going to say lorem let's do LARM 30 tab okay so this is our main main column and our sidebar so let's save that and obviously it's just going to look you know it's not going to have any alignments or anything to begin with now before we get into the grid I'm just going to add a couple Styles up here so that you can better see the outline of each column so let's take that wrapper class and we're going to say all the divs all the directives in that wrapper I'm just going to give a background of light gray and I'm just going to give it a padding of 1m okay so that better defines the columns now I'm also going to make it so that every other element or every other div in the wrapper has a different shade of gray okay so to do that we're going to use we're going to say wrapper okay the divs in the wrapper and we want to grab the end child odd so it's going to say every other one every odd element and then I'm going to just give the background will say DDD alright so now every other element is going to have a different shade of gray so again this has nothing to do with grids it's just so you can better see things so now we're going to start to work with the grid so let's take our rapper class and we're going to add a display grid okay just like with flexbox you would do display flex we're going to do display grid and save now notice that we don't have any changes yet it's not going to do anything different because we need to define the width of our columns okay of the developments so to do that we use grid - template - columns all right let's say we want a 70% column and a 30% column and save and that's it that's going to give us a you know our main div and then our sidebar div now since this is a grid no matter how many divs we have in our wrapper it's going to continue to follow this this this map that's 70% 30% so just to give you an example let's copy both of these divs and let's go ahead and paste another set in okay so now we have the four Devi's let's save and it's going to follow that 70% 30% no matter what okay we don't have to define rows okay like in flexbox or bootstrap or whatever where we define well I guess not with flexbox but in a grid system like bootstrap we define our rows now we can change this to let's say let's do 40% 30% 30% and save and that's going to split it into three columns so 40% 30% 30% and it's going to follow that even though we have 4 divs and we only set 3 values here it's going to continue to follow that that's why this one here is 40 if I go and I add another div down at the bottom here and we'll just say hello and save it's going to follow that formula okay so it's going to be 30 the next one will be there the next one will be 40 down here and it's going to follow that system alright let me just get rid of that one and let's just change this back to 70/30 good all right so we have our 70/30 grid now if we want to have let's say some spacing in between here we don't have to manually set margin we can add something called gap okay so what we'll do is we'll say grid - column - gap and let's set that to 1m you can use whatever unit you want it can use pixels and save it and you'll see that now we have a space here now this is the column gap so it's separating the columns if you want to separate it this way then that's a row so we would say grid - ro - gap and set that to 1m okay so now we have that spacing now if you're going to use the same spacing here which you probably often will you can actually cancel this out and you can just do grid gap okay we'll do grid gap 1m and then what I'll do is just comment these out I'm going to keep them there so that you guys have them and save and you'll see it gives us the same effect all right so this is this is very very basic now what I'm going to do is I'm going to create another file I'm just going to call it index - dot HTML okay because we're going to create a couple files I want you to guys I want you guys to have this as a reference and I don't want to change it up too much so I'm going to just create another file okay so let's go ahead and put some structure in here just get rid of this stuff we don't need that I will say CSS grid and put our style tags in here alright so what I'm going to do now is let's again create let's create a wrapper so we'll say wrapper and these are going to be we're not going to put as much content so let's put a div and let's just say lorem 4 okay so just a couple words and then I'm just going to copy that and we'll paste a bunch in okay and then I'm going to grab from index index.html this stuff just so you can see you know again so we can add the background and stuff okay and then let's go to slash index - dot HTML - save that there we go all right so we haven't done anything with the grid yet so let's go up here and let's say wrapper and let's do display grid and then again we're going to do our template columns so we want to do grid template columns and now instead of doing percents there's actually a different unit we can use and that's fractions so let's say we want to do one fr one fr 1fr okay and then we'll save that and that's going to split it into fractions so since we have three of these it's going to be three columns now if we wanted for instance this middle one to be bigger than these other two what we could do is we could say - fr save it and now you can see that one's bigger now it's it's recommended to use the fr over percentages or pixels again you can use I don't want to know if I said this but you can also use pixels here or any unit but the fraction fractional I think it's called is the recommended because when you start to use percentages you're going to run into issues with margin and padding especially when you get into nesting and so on so you want to stick to these fractional x' now if we were to have all you know 3:1 FRS we can actually create a shorter syntax for this especially imagine if we had you know twelve of these so what we could do is let's take our grid template columns and instead of putting three separate ones we can actually say repeat and then here we can say let's repeat three times one fr save that and there we go if we wanted to do for fr so for columns we could do that as well now we don't have to just do one fr here let's say we wanted a combination of 1 & 2 so 1 2 1 2 then we could do one at 5 2 fr and we'll say repeat that and now it's 1 2 1 2 1 2 and it will keep going like that four times alright but let's just keep it at one f5 we'll do three columns like that now we can add our gap if we want so let's say grid gap let's say 1 M and it's going to separate them out so now let's talk about height so by default if we were to actually you know important first let's let's just deal with fixed Heights so to do that let's do grid - Otto - rows and we're going to set this to let's say 100 pixels save and now they're all going to be a hundred pixels high okay which is really helpful you know when you're dealing with regular CSS and you want to deal with alignments and Heights and it can get a little messy ok so this really makes it simple now if I were to add more content to one of these let's take this second one here and let's say lorem 40 tab and save you'll see that it's going to go outside of it this is going to stick it at 100 pixels no matter what now if we want to make this flexible what we can do is let me just see I'm going to comment this out because I want you guys to have you know if I don't want to be changing everything I want you guys to have you know the incremental changes in these files so let's say grid Auto rows and what we can do is we can set min max alright and we're going to say we want these to be 100 pixels and auto so this is going to if I save it it's actually going to stretch out to fill the content it's going to be a hundred pixels by default but if we go if our content goes beyond hundred pixels then it's going to follow it okay it's going to stretch basically and it's only going to be for this for this particular row these ones you can see are going to stay at a hundred now if this if this one here happened to fall up here like if I said or p4 and say that one is now going to stretch because it's on the same row as that okay I'm going to put that back two three okay so just remember if you want your height to be flexible then and you want it to have an initial you know hundred pixels or whatever it may be then you want to use this min max function all right so now let's talk about nesting grids or sub grids so we're going to go to let's see we'll go to the third one here and what I'm going to do is I'm going to give this this particular give a class of nested okay and then we'll put a div in here and let's just we'll just say la Ramona get really short okay and then let's just copy that and we'll do three of these so let's save that by default it's just going to look like this obviously but what we need to do is set this nested to be a grid so let's go up here and let's see we'll go right here I guess and say nested and we're going to display as a grid okay if I save it you'll see that it spreads out now I want these to go I want three in a row so what we'll do is do our grid template columns and I'm actually going to copy that because we want three so save that there we go let's make it so that we can see these a little better so what I'm going to do is let's see go down here and I'll stay nested all the directives and nested I just want to add a border let's do border three three three one pixel solid okay and then we can also set a height for these nested divs so if we want to do that we're going to use grid auto rows so let's go to nested and do grid Auto rows and let's set that to let's say 70 pixels and save and there we go we can also add a gap so it's a grid gap and we'll do one M Save there we go let's see let's also add some padding to the the inner divs of the nested so we'll say padding:1em there we go so it's going to see that everything is going to is going to adjust to accommodate that style all right and no matter how many divs I put in this nested let's go ahead and just paste in some more there we go so you'll see that they'll just automatically look correct they're going to generate as an actual grid all right so I hope that I'm being clear in this in this tutorial I'm actually pretty new to CSS grid as are most people all right so I'm going to keep this for you guys as a reference and I'm going to create one more file we're going to look at a couple more things so let's say index 3 dot HTML and let's see we're going to just you know what I'll do is just copy everything we did we'll just copy index 2 and then I'm just going to get rid of let's see get rid of the nested stuff and let's see we'll just um let's just get rid of all this and we'll get rid of everything that's in the wrapper okay so we just have a div with the class of wrapper we have our background crap here and the wrapper is displayed as a grid so let's save that and go to index 3 dot HTML okay so we don't have any any content in here yet now what I'm going to do is just create a couple divs in here we're going to create some divs I'm going to give them a class of box not blocks box alright so go ahead and exhale in here I'll say box one let's copy that two three four so we'll do four boxes four four four and I'm also going to give them individual classes that will be box one box two box three and box 4 okay so there we go and let's go up to our wrapper to our grid and let's say grid template columns and we'll set that to let's do one we'll do one fr to Fr 1fr so it's going to be three columns save it so it's going to be you know one two fraction one fraction and for the height for the auto rows let's set that to min Max also to min max 100 pixels by default what we want it to stretch to fit any content inside of it we'll also add our gap so great grid gap one m and save so now we're going to look at just a 5-minute justifying and aligning items okay so in this wrapper let's they justify items and we're going to set that to start and we're going to save so this is going to align it this way and it's going to put it's going to put the element at the start of its column okay and if you know flexbox this is pretty similar we have our flex justify and alignments there as well and we use start and end in Center but this is going to align the items to the start all of them let's try Center okay that's going to put them in the center let's do end and it'll put them at the end and then the default is stretch okay so stretch is just going to you know stretch it across the whole thing so we also have align items which is going to go the other way so if we set this to start you'll see they're going to start at the top here we can do Center put them in the center and we can do and okay and then the default again is stretch so we can use justify items and align items now we can also do align self so if we go down here let's create some classes for a box one through four we'll go right here let's say box one yeah we'll just do box one box two three and four okay so let's take box one and let's give it a self of start okay save that and you'll see it's going to align it to the top to the to the start so let's take box two and we'll say a line let's say a line self end and that'll put it to the end okay we can also do justify self so let's take box three and say justify self and we'll say end save that and puts it to the end okay so you can align it align things however you want you can either do all items with justify items align items or you can do just individual elements here with align self and justify self alright so the last concept that I want to talk about is one that's a little confusing it was a little confusing to me at first it still kind of is but it is using lines so I'm going to bring down an image here which if I can get this [ __ ] thing in here with the hell there we go alright so think of this is a grid here okay so we have you know three call three rows three rows and think of these lines is one two three four okay same thing going down one two three now what we want to do is we can take for instance box one and we can say we wanted to go from one two three this way or from one two three this way okay so what I'm going to do is just comment out the align cells because I don't want that to confuse you guys I probably should have did that after but let's just go ahead and comment these out okay and then let's take box one and the properties for this is going to be grid column in grid row so let's say grid column and let's say we want from one to three we want to span from one to three actually before I do that let's just save it back to what it looks like naturally and then yeah alright and then we'll put back the grid column one two three and let's save so just like if we look at this diagram we're saying take it from here to here so one two three and it's going to knock these ones over and then at the same time we can go this way we can go vertical let's say we want it to go from one to three that way as well so for that we would use grid - row and we'll say one three and save okay and that pushes it down and notice that now we have these over here this is what what is meant by two-dimensional this is what is what is much much different than flexbox and it can get a little complicated understanding the placement at least in my opinion but it is really powerful and once you're done with this you may want to if you're really interested in CSS grids I suggest you know looking at some more advanced concepts so let's now take box - oh yeah looking what they all say box for let's say one two three four all right so now we have box two right here and what we'll do is we'll say grid let's do grid column set that to three it doesn't have to be a span we'll just set it to three so it stays where it is and then let's set the row from one to three K remember Row is this way so we're goin to three so as you can probably guess it's going to just go you know this is going to take up that whole area so let's say grid call a grid row one two three and there we go so now it's going to take up one two three this way now we can order these in different ways - by using this method so let's take box three and let's say we want grid column and let's say we want two to four and then we'll say grid row and grid row we'll keep it three so let's save that and now you'll see that box three has moved over because we're saying start at two and go to four so it's starting at two going to four and it's pushing box for over to this side so we can rearrange the grid however we want all right now another awesome thing about grids that you don't really get with Flex boxes you can overlap things you can overlap elements so let's take this box for here and let's say we want grid column 1 ok grid column 1 and then for the row we'll say grid row we're going to say 2 to 4 let's save that and now you'll see that for the grid column of course it's starting at 1 over here but for the row we're starting at 2 so going this way starting at 2 going down to 4 all right and this makes it overlap box one and if you wanted to more clearly see this we could simply add a border we'll say one pixel solid and save and you'll see that it's overlapping box one so we can do things like this without you know traditionally have having to add margin negatives and things like that which is crap all right and even using all of these these lines these span these line spans we can still use our alignments so let me just uncomment this stuff oops and we'll go ahead and save and you'll see it's still going to align things so there's a lot you can do there's a lot more than this like I said I'm fairly new to CSS grids but I can already see how powerful they can be when building interfaces especially the you know the grid type interface is like like Microsoft uses a lot with the with the the hell's it called the metro or whatever like the Windows screen this stuff here so if you want stuff like this in your UI like this is really powerful for that okay I'm just going to comment that stuff that the alignments back out before I save this file for you guys okay all the all this code would be in the description so I think that's going to be it guys like I said if you want to look more into this look at look at some of the advanced stuff this is this is the basics of CSS grids so hopefully you enjoyed it please leave a like if you did please subscribe if you're not and that's it thanks for watching so if you guys really like my videos and you learn a lot from them and maybe you have a couple extra dollars to spare check out my patreon page I'm working on creating special content for patrons you also get special deals on future courses and there's even an email support here for all YouTube videos and projects to learn more visit patreon.com slash traversée media

Channel: Traversy Media

Views: 1,668,775

Rating: 4.9645309 out of 5

Keywords: css grid, css grids, grid css, css grid layout, grid, css grid tutorial, css grid crash course

Id: jV8B24rSN5o

Length: 27min 54sec (1674 seconds)

Published: Tue Aug 01 2017