4.2 Implementing the Grid Layout

Hello, and welcome back to the CSS of the future. In our last lesson, we talked very briefly about what the grid layout was, and in this video I wanna show you how to implement it. Now, I don't wanna spend a whole lot of time on it, because for all we know, the next draft of the specification could have it working completely different, or it could get rid of it altogether. So I just want to do a very brief over view to show you just how easy this can be to implement. So here you can see the grid layout in action. And I've turned on the experimental web features in Chrome in order to allow us to test this. But as you can see, we have a simple grid layout here, and I've added some borders around it so that we can really see where those columns and rows lie. So basically I have a grid layout here with two columns and three rows, and in the right column over here, our top row spans two of those three rows and then we have another row down here at the bottom. You'll also notice at the bottom right, that we have two separate columns nested within this one little section, so we can have grids within grids. So before we jump into that, let me show you what our starting file is going to look like. I'm gonna navigate to grid-start.html. And here we go. I've already styled up the content a little bit, so that we've got the background color and the rounded corners and the borders. Now I wanna go in and turn this into a grid layout. And again, it doesn't matter what order this content is in. You can put this content in any order in your HTML. And you can customize where its placed on the page in your CSS code. So let's jump into our CSS, so inside your project files folder, you'll find a folder called grid layout. And we're gonna get started with grid-start.html in that grid layout folder. Now before we make any changes to it let me go ahead and save this so I don't accidentally save over the start file here. And our ending file it's hopefully gonna be called grid.html. So I'm getting rid of the current grid.html that I already showed you in the browser. And now if we navigate back to our browser and refresh grid.html. You'll see that it now it looks just like grid-start. So now I want to turn this into an actual grid layout. So back in our code let's take a look at our html first of all. Now the markup here doesn't really matter. You can use whatever type of markup you prefer. The one caveat there is you need to have some kind of container. Here we have a div with a class of container and it's containing all of our content. The reason we need that is because that container div is where we're going to define, that it's going to displayed as a grid, first of all, but we're also going to define our rows and columns for that container. And then we'll assign each of these other divs to one of those rows and one of those columns in order to place it where we want it. So let's get started. You'll notice we have a different class of container. One of our divs here has a class of logo, that's going to be the upper left corner, with the title of the page on it. Then we have our menu, which is also going to be in the left column. And then a small copyright section that's gonna be in a third row at the bottom left. Then we have our feature content, which is gonna be in the upper right, and our sub content in the lower right. And then inside sub content we have two columns nested within that. So let's jump right into our CSS and make this happen. So what we need to do is we first need to define the display property of our container. So I'm gonna point to the container element here, by pointing to .container, the div with the class of container. And we're going to set its display property to a value of grid. Then I want to define the columns within the grid by using the grid-template-columns property. Here we're gonna have a number of different values. So lets say that we wanted three different columns, each one of them are gonna be 150 pixels for example, so we'll say 150 px three times. So however many values you enter in here, that's how many columns they are going to be. So let's make this a little more flexible. We're actually just gonna have two columns here, so I'm gonna get rid of this third value. Our value on the left we're gonna set to a solid value of 250 pixels, and then for our value on the right, I'm gonna use a fractional value of 1fr. If you use a fractional value of 1, that simply means this is gonna take up the rest of the space on the stage. So our left column will take up 250 pixels. Our right column will take up the rest of the space. Then we'll do the same thing for rows. We'll do grid-template-rows and we would set this up the exact same way. So we wanted to set our height of our first row at 100 pixels, our second row, I'm going to actually use the minmax property, and set the minimum to min-content and the maximum to 1fr, or one fractional value. And then for the bottom section, lets say we want it to be 100 pixels as well. Now we still haven't really done anything different to our page. If we were to save that, and jump back over to grid.html and refresh. You'll see that it's tried to figure out where we want everything. But obviously this is not what we're looking for. It's moving from left to right, as if you were reading a sentence. And we actually want this part to be at the top. But then we want our menu to be below it still in the left column or the first column. So how do we set that up? Well, let's jump back into our code. And now we're going to define where we want each of these divs to reside simply by referring to the div and setting a couple of properties. So let's refer to the logo div first. So we'll create a new rule for the logo. And inside that logo class, we're first gonna set up which column it's gonna be in using the grid column property. I want it to be in column 1, so we'll set that to 1. I also want it to be in row 1, so we'll set this to grid row of 1. Then we would do the same thing for our other items. So then we have our menu, so .menu. Here we're gonna set grid column to 1. And grid row to 2. This will be in the second row which, if we look over here, the second row is using this value here. So the minimum value is gonna be min-content. The max value is gonna be 1fr. Which is the rest of the space on the stage after you take care of the bottom 100px and the top 100px. So that takes care of that. And then below the menu we have our copyright section. So we can set that the same way, instead of typing all that out again, I'll just highlight it here, copy it and paste it. We're just gonna change grid-row here to 3. So then I'm gonna grab all, actually we just need two more. So I'll grab two of those, copy them, and then paste. Our next one after copyright is gonna be our featured content here. So we'll change menu here to feature. Our grid column here, this will be in the second column. And then our grid row is gonna be row 1. But I want this particular section to span two rows. It's gonna be in row 1, but I want it to span two rows, so the way we do that is we simply type a forward slash and then span, space, and then the amount of rows, or the number of rows we want to span. Which in this case is gonna be two. So then we have, after our feature, is gonna be our sub-content section. So we'll define that here. And that's gonna be in grid column 2 as well, and grid row of 3. Remember our first row here is spanning two separate rows so this one isn't gonna show up until row 3. So by just doing that, we can save our file, jump back into our browser, and refresh, and there we go. We've very easily laid out our content, and once again, it doesn't matter what order your content is in in your HTML. You can rearrange it however you want to, simply be defining which column and which row you want each item to show up in. Now I mentioned that we can also have a nested grid. And I'll do that very quickly for this section down here. And that's our sub-content section. And so let's break this one out a little bit. We have grid column 2, grid row 3. But remember, we need to define the sub-content as a grid as well. So we're gonna set its display property to grid, and then we can define its rows and columns. Now for our purposes here, we just need to define the columns 'cuz we're just gonna have one row. So we just need to set grid template-columns and we're just gonna have two separate columns, so I'm going to use fractional values here. I'll type 0.5fr space 0.5fr so each one will take up half of the width. So now that we've done that, we can set up our two columns here as column 1 and column 2. And our classes are col1 and col2. So let's come back down here, and we'll set up .col1. It's gonna have a grid-column-value of 1, and again, we don't need a grid row value here because we only have one row. And col2 is gonna have a grid-column value of 2, and that should take care of it. So we'll save that, refresh our page, and now we see that even that is set up in two columns. So those are the basics of the current draft of the grid layout. Hopefully this will make it further into the level four specification. I'd really like to see this become pretty standard because the grid layout is fabulous, it's easy to use and it's very, very flexible. Thank you for watching and I'll see you in the next lesson.