00:00 There are three display values that pertain to CSS grid. The grid value, which will generate a block-level grid, the inline grid value, which will generate an inline-level grid, and the subgrid value, which we may need when we come to nest grids within other grids.
00:19 We'll use display grid, because we want to use a block-level grid. Let's jump in at the deep end by finding out a little bit about how CSS grid layout works. We'll provide our grid container with some grid items, which we're going to lay out with grid.
00:38 We'll have a header, two asides, a section, and a footer. Now that we've got some markup to work with, let's go ahead and add some styles to our grid items, so that they show up clearly. Next we'll apply a gutter to our grid using a grid gap. Now let's make it responsive. We'll have our grid show a column on small screens.
01:02 To do this we're going to use grid-template-areas. Which is a way to specify our layout in a very clear way. Notice that our section comes before our asides, which is different to how it is at the markup. That's no problem.
01:18 For larger screens we want a different layout, so we'll set up a media query and we'll specify some different grid-template-areas. It's going to consist of three rows and three columns. We've specified how we want our grid to look in two different screen widths.
01:37 The last thing to do is wire this up to our grid items. To do that we can use grid-area. Each grid-area name corresponds to a name specified in grid-template-areas.
01:55 We've linked up all of our grid items with our grid container and already we have a nice, responsive CSS grid. On small screens our grid-template-areas describes a column layout and on larger screens we have a three-column layout.