In the previous video I added a Nav element to the container, and

changed the column tracks from two to three columns.

And I suggested that you practice using grid template areas by placing

the nav item on the grid.

Now I'll show you my solution, then I'll teach you how to use media queries

to adjust the position of grid items so they look their best at different sizes.

First, I'll assign the nav item to a named grid area.

So I'll target the nav element and assign it the grid-area: nav.

Then in the container rule, I added a third column, so we'll need to span

the header across one more column track, by writing header inside the first string.

And in the second string, or row, I'll place the nav main and aside items.

Then I'll stretch the nav item down to the first column of

the third row by writing nav as the first grid area.

And then I'll span the footer across the remaining column tracks.

Now, your grid layout may look different than mine and

that's okay, as long as you were able to place the items correctly without

displaying any unintentional spaces in the grid.

For example, you may have used one or

more dots to create an empty grid cell, and that's totally fine.

Grid template areas make adjusting your layout at different break points quick and

easy and I'll show you.

So first create the default 1 column layout for

small screens by setting grid-template-columns to just 1fr.

And then I'll place each of the named grid areas inside separate strings which,

as you learned earlier, will create a row on the grid for each item.

So, we'll place just header inside the first string, nav inside a second.

Then we'll write one for main.

Below that we'll place aside in a string and footer in the last string.

I want all rows to be as tall as the content they hold instead of setting fixed

heights, so I'm going to replace grid-template-rows with grid-auto-rows.

We're no longer declaring explicit row tracks.

So that means every row the grid creates will be an implicit row track

that will sized by this property.

Remember, grid-auto-rows gives you control over the size of implicit row tracks.

As the value, I'll use the minmax function to define

implicit rows that are no shorter than 150 pixels and

can grow to accommodate any amount of content with auto.

All right, the default layout is all set so

it should look fine on mobile devices or tablets.

Now, I'll adjust the grid for wider viewports using media queries.

At the bottom of the stylesheet, I'll create a media query that targets the grid

container when the viewport is 768 pixels or wider.

And at this break point, I'll bring back the three flexible

column tracks with grid-template-columns: 1fr 2fr and 1fr.

And I'll reposition the grid items with grid-template-areas.

So inside the first string, we'll write header header header.

And the second string let's write nav main aside.

And in the third string or row, we'll place the footer.

Let's have a look in the browser It

looks like we should also reduce the height of the header and

footer areas at this breakpoint, and we can do that with grid-template-rows.

So back in the media query, we'll add grid-template-rows.

Let's set three row tracks.

The first one to 100px, the second to minmax(150px,

auto), and the third to 100px.

Let's have a look.

Good, finally, I'll create one more media query to adjust

the grid at a min width of 992 pixels.

Inside I'll target the container.

And in this media query we're only going to use the grid-template-areas property.

All right, let's place the first row by writing header three times inside

the first string.

Inside the second string, I'll place the nav main and aside grid areas.

And finally, let's do nav, footer and footer.

All right, our responsive grid layout is good to go.