Preview
Video Player
00:00
00:00
Adjust the Grid with Media Queries
5:51Learn how grid template areas make adjusting your layout at different breakpoints quick and easy.
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