Get up and running with CSS Grid Layout

[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.