Describe a grid layout using named grid lines

[00:00] Let's start by writing some markup for a generic page layout. Let's set up a container, which will be our grid container, and three grid items, a left sidebar, a main content div, and a right sidebar. We want our container to have a display value of "grid," and then, we'll set up some named grid lines.

[00:24] We'll have left sidebar start, which will take up 20 percent, main content start, which will take up 60 percent, and right sidebar start, which will be 20 percent again.

[00:44] Let's make our grid items stand out a bit. We'll set a height value of 100, put height, and then on the grid items themselves, set the background color to make it more visible, a nice big font size, and we'll align everything in the center. Let's make a bit of space between these items by setting a grid gap value. We'll set it to 15 pixels.

[01:15] Currently, we've set our named grid lines here in grid template columns. But we're not really using them for anything yet. We're just telling our grid to use three columns.

[01:25] Let's say we want to add a footer to our layout. It's going to take up this space down here. It's going to span across the main content and the right sidebar. We'll add a footer to our markup, and we get this implicitly created row for us.

[01:41] But let's specify some rows. We'll set up quick template rows. We'll name our rows, just like we did with our columns. We'll have body start, which can be 80 percent, and footer start, which will be 20.

[01:59] Now, we have some grid template columns and grid template rows, which are corresponding to the values we have here. Body start corresponds to the top line of this top row, and footer start corresponds to this line of the bottom row. Left sidebar start is the start of this, main content start is here, and right sidebar start is along here.

[02:22] Now, we said we were going to insert our footer so that it covers this space here, and so, our left sidebar can drop down. It will take up this entire column. We can achieve this, now that we've got our named gridlines.

[02:37] We can use grid column start and grid column end to specify where we want our footer to be placed. We specified main content start as grid column start, and by default, it will only take up one cell, like it has here. We'll tell it to span across two cells.

[02:59] In a similar way, for our left sidebar, we want it to begin where it is now, but we want it to end down here. We can say, grid row body start, and span two again.

[03:16] Now our left sidebar is spanning across two rows, and our footer is spanning across two columns. If we want it to take up the entire space, we can also say minus one, which in this case would do the same thing, because they're both going to the end of the row or the column.

[03:33] However, we can do something a little bit cooler as well, with named grid lines. We can specify more than one per line. We can say here left sidebar end is the same as main content start, and right sidebar end would be the end of main content. Then we can specify the very last grid line, and being able to refer to this will mean that we don't have to rely on minus one or span two.

[04:00] Let's do the same with our rows. Now, we have an explicit way of referring to the end of the last column and the end of the last row. Now, we can say right sidebar end, and footer end. It's that much clearer what's actually going on now.

[04:23] You might notice we've got some overflow here going on in our grid. That's because we're using a combination of grid gap and percentage values. To get around that, we could use the FR value. Instead of referring to percentages, we're referring to FRs. Now, we have no overflow.