Bummer! This is just a preview. You need to be signed in with a Basic account to view the entire video.
Start a free Basic trial
to watch this video
Learn how grid template areas make adjusting your layout at different breakpoints quick and easy.
-
0:00
In the previous video I added a Nav element to the container, and
-
0:04
changed the column tracks from two to three columns.
-
0:07
And I suggested that you practice using grid template areas by placing
-
0:11
the nav item on the grid.
-
0:13
Now I'll show you my solution, then I'll teach you how to use media queries
-
0:17
to adjust the position of grid items so they look their best at different sizes.
-
0:21
First, I'll assign the nav item to a named grid area.
-
0:26
So I'll target the nav element and assign it the grid-area: nav.
-
0:34
Then in the container rule, I added a third column, so we'll need to span
-
0:39
the header across one more column track, by writing header inside the first string.
-
0:45
And in the second string, or row, I'll place the nav main and aside items.
-
0:53
Then I'll stretch the nav item down to the first column of
-
0:57
the third row by writing nav as the first grid area.
-
1:02
And then I'll span the footer across the remaining column tracks.
-
1:08
Now, your grid layout may look different than mine and
-
1:11
that's okay, as long as you were able to place the items correctly without
-
1:15
displaying any unintentional spaces in the grid.
-
1:18
For example, you may have used one or
-
1:20
more dots to create an empty grid cell, and that's totally fine.
-
1:26
Grid template areas make adjusting your layout at different break points quick and
-
1:30
easy and I'll show you.
-
1:31
So first create the default 1 column layout for
-
1:35
small screens by setting grid-template-columns to just 1fr.
-
1:41
And then I'll place each of the named grid areas inside separate strings which,
-
1:46
as you learned earlier, will create a row on the grid for each item.
-
1:50
So, we'll place just header inside the first string, nav inside a second.
-
1:58
Then we'll write one for main.
-
2:02
Below that we'll place aside in a string and footer in the last string.
-
2:10
I want all rows to be as tall as the content they hold instead of setting fixed
-
2:15
heights, so I'm going to replace grid-template-rows with grid-auto-rows.
-
2:26
We're no longer declaring explicit row tracks.
-
2:29
So that means every row the grid creates will be an implicit row track
-
2:33
that will sized by this property.
-
2:35
Remember, grid-auto-rows gives you control over the size of implicit row tracks.
-
2:39
As the value, I'll use the minmax function to define
-
2:43
implicit rows that are no shorter than 150 pixels and
-
2:48
can grow to accommodate any amount of content with auto.
-
2:56
All right, the default layout is all set so
-
2:58
it should look fine on mobile devices or tablets.
-
3:01
Now, I'll adjust the grid for wider viewports using media queries.
-
3:05
At the bottom of the stylesheet, I'll create a media query that targets the grid
-
3:09
container when the viewport is 768 pixels or wider.
-
3:22
And at this break point, I'll bring back the three flexible
-
3:28
column tracks with grid-template-columns: 1fr 2fr and 1fr.
-
3:36
And I'll reposition the grid items with grid-template-areas.
-
3:43
So inside the first string, we'll write header header header.
-
3:52
And the second string let's write nav main aside.
-
4:03
And in the third string or row, we'll place the footer.
-
4:11
Let's have a look in the browser It
-
4:17
looks like we should also reduce the height of the header and
-
4:20
footer areas at this breakpoint, and we can do that with grid-template-rows.
-
4:24
So back in the media query, we'll add grid-template-rows.
-
4:30
Let's set three row tracks.
-
4:32
The first one to 100px, the second to minmax(150px,
-
4:39
auto), and the third to 100px.
-
4:44
Let's have a look.
-
4:47
Good, finally, I'll create one more media query to adjust
-
4:52
the grid at a min width of 992 pixels.
-
5:01
Inside I'll target the container.
-
5:05
And in this media query we're only going to use the grid-template-areas property.
-
5:15
All right, let's place the first row by writing header three times inside
-
5:19
the first string.
-
5:24
Inside the second string, I'll place the nav main and aside grid areas.
-
5:33
And finally, let's do nav, footer and footer.
-
5:44
All right, our responsive grid layout is good to go.
You need to sign up for Treehouse in order to download course files.
Sign up