Describe a grid layout using grid-template-areas

[00:00] We have some mockup here for a page. Let's start making a grid layout from it. We want display-grid on the container, a 10px gutter. It will take up all the available height and will show up the grid items so that they're easier to see.

[00:21] We're going to use the grid-template-areas property to define how our grid looks. Firstly, we're going to set up a grid-area value on each of our grid items. This is so that they can be referred to in grid-template-areas. Let's see that in action.

[00:38] Let's say we want a two-column layout. The header is going to take up two columns. The aside is going to be on the side. The section is going to take up most of the room underneath the header. The footer will also take up two columns.

[00:51] We can visualize how it's going to look. Now, we can easily describe our visualization using grid-template-areas. We want the header to take up two columns, aside and section next to each other, and footer to take up two columns. There we have our grid layout.

[01:15] Let's set up some grid-template-rows so that our aside and section take up more vertical space. We'll specify some grid-template-columns too. There we have a super easy way to define how our grid is going to look. It would be very easy for anyone to come along and see what this is going to look like straight off just from glancing at it.

[01:40] Let's say we wanted to make it responsive. We'll set up a media query. For 400px and above, we're going to put the grid-template-columns, grid-template-rows, and grid-template-areas that we just defined. For under 400px, we'll set up another grid-template-areas property.

[02:09] Let's say on mobile we want the header, then the section, then the aside, and then the footer in a one-column layout. We need to do header, section, aside, and footer. Now, when we go down to below 400px, we have the grid that we specified in this grid-template-areas.

[02:32] It looks like it needs some grid-template-rows to make the section part bigger. There we have it. The values that we're defining in our grid-template-areas correspond to the grid-area setting that we set up in each of our grid items.

[02:53] Let's see what's going on under the hood. If we look at our header, for example, we can see the grid-area setting here. We can see that it's actually just shorthand for grid-row-start, grid-column-start, grid-row-end, and grid-column-end.

[03:08] We can actually refer to these grid lines on grid items. We could suffix them with start or end. If we specified grid-row-start: header-start and grid-row-end: section-end, we would have a <div> that overlaid our header and our section.

[03:25] Another thing to note is that we've changed the order of how our items appear on our mobile layout, but they haven't changed in the DOM. In the DOM, we have header, aside, section, footer. On our grid, we have header, section, aside, footer. However, if we look down here, we can see that the order is how we specified it in our HTML.

[03:48] One final thing to point out is that with grid-template-areas we could also specify that we want an empty space to show instead of a grid-area. We could do that with a period. Now we have an empty space down here. We could give it any number of periods, and it would do the same thing as long as there's no spaces between the periods.

[04:09] Also, we could have our grid-areas span across rows. If we wanted the aside to carry on all the way down here, and we wanted the section to carry on all the way to the top, we could do that. We could place the aside across here.

[04:26] Now, it's taking up the entire area below the header. We could stick the section here. Now the header is squashed into here. The section is taking up this space.