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