Preview
Video Player
00:00
00:00
Placing Elements Using Grid Template Areas
8:05CSS Grid provides a feature that lets you create named grid areas, then you use those names to position items on the grid. First, you'll use the grid-area property to assign a custom name to each grid area. Then you'll use the grid-template-areas property to define how the layout looks, by referencing those custom-named areas.
Grid areas are the slots on the grid
where grid items are placed.
0:00
One of the ways grid areas get created
is when you place an item using line
0:04
based placement, for instance,
0:08
the layout we created in the previous
video is made up of four grid areas.
0:10
The header, main, aside, and footer areas.
0:14
A grid area is always enclosed by
four grid lines, one on each side.
0:17
For instance, the header's grid area
consists of the space between the first
0:21
and second row grid lines and
the first and third column lines.
0:26
And the aside's grid area is
bound by row lines two and
0:31
five and column lines two and three.
0:35
You've learned how to position
items against grid lines
0:38
using line based placement.
0:41
Well, CSS grid provides
a delightful feature that lets
0:43
you create named grid areas.
0:47
Then you can use those names
to position items on the grid.
0:49
So in this video, we're going to have some
fun laying out the header, main, aside,
0:53
and footer items using
grid template areas.
0:57
First, we're going to use
the grid-area property
1:00
to assign a custom name to
each of the four grid areas.
1:04
Then we'll use
the grid-template-areas property
1:08
to define how our layout looks by
referencing those custom named areas.
1:11
To start, I'll delete the line placement
properties, from the header, main, aside,
1:16
and footer rule, but
1:21
you can just comment them out if you
want to use them as reference for later.
1:22
Now, we're going to give each
selector a grid area name.
1:27
We'll start with a header, so
let's add the grid-area-property
1:30
inside the header rule, and
assign it the name header.
1:34
And you can give a grid area
any name you want, for example,
1:38
head, hd, or just the letter h.
1:42
I'm choosing to identify
the area with the name header.
1:45
Next, I'll give the main element
a grid-area value of main.
1:48
Then set aside's grid-area value to aside.
1:55
And we'll give the footer
a grid-area value of footer.
2:01
Now, the grid-area property is
just a shorthand property for
2:06
setting a grid item's size and
location within the grid.
2:10
So it could do a whole lot more than
just assign names to grid-areas, but
2:13
that's what we're using it for
in this video.
2:16
I've also posted resources about the
grid-area-property in the teacher's notes.
2:18
Up in the grid container rule,
we'll keep the same two column tracks,
2:22
but let's set the row tracks back to three
rows by removing the fourth row track,
2:28
set to 100 pixels.
2:33
And next,
right here in the container rule,
2:35
we'll use the grid-template-areas property
to place the header, main, aside,
2:38
and footer items onto the grid by
referencing their named grid-areas.
2:45
This is the fun part.
2:51
You see,
by assigning a name to each grid item,
2:52
we've defined a set of individual and
reusable grid-template-areas
2:56
we can place on the grid via
the grid-template-areas property.
3:01
The value for grid-template-areas
should be a set of strings.
3:06
And each separate string
creates a row on the grid.
3:10
We need three rows, so
let's first create three empty strings.
3:13
And I like to place each string on its
own line to make the code more readable,
3:19
and you'll see how it's going to help you
visualize the structure of your grid.
3:24
Inside the strings, you reference your
grid-area names, and grid-template-areas
3:30
will place items on the grid based
on where you write the names.
3:35
So in other words,
3:39
how you write them is going to be
how they appear in the browser.
3:39
So let's start with the first string which
represents the first row on the grid,
3:43
and we're going to place
the header inside the first row
3:49
by writing the header grid-area name.
3:52
And our grid has two column tracks, so
we'll span the header across both tracks,
3:55
from one edge of the grid to the other,
by writing header two times.
4:01
In the next string, or row,
we'll place the main item
4:06
inside the first column track by
writing its named grid-area, main.
4:11
Then, we'll place the aside
in the second column.
4:15
And finally,
the footer will span the entire third row.
4:19
So just like the header,
let's write the footer grid-area twice.
4:22
So to recap,
each separate string creates a row.
4:28
And a column is created for each word or
grid-area name in the string.
4:33
And make sure that you include
a space between each grid-area name,
4:39
otherwise, the browser will
not recognize the grid-areas.
4:43
Let's have a look in the browser.
4:48
And just like that we've created our
site layout using grid-template-areas.
4:50
And what's really neat is that
the Firefox Grid Inspector
4:55
can display the area names
in the grid overlay.
4:58
So I'm still here using Firefox nightly,
and
5:01
in the Grid panel under
Grid Display Settings,
5:04
check Display area names, and it will
show you the names of each grid-area.
5:07
As you can see, it resembles exactly
what we've written as the value for
5:13
grid-template-areas.
5:17
And this is what I meant earlier when I
mentioned that placing each string on its
5:18
own line gives you a precise visualization
of the structure of your grid.
5:23
So as you can see, this is a fun and
5:28
useful way to prototype layouts with
grid because you can easily and
5:29
quickly move items around to
see where they might fit best.
5:33
For instance,
5:36
you can quickly swap the placement of
columns like the main and aside items.
5:37
Or you can make a grid-area
take up multiple
5:47
spaces by simply repeating its name.
5:50
For example, I'll replace
the second footer name with aside
5:54
And the aside now takes up
part of the third row, and
6:02
we can quickly test how it looks
when the main item takes up a larger
6:06
area of the grid, so I'll set
the third string to main and footer.
6:11
You can also leave empty spaces or
empty grid cells using a period or
6:19
the full stop character.
6:22
For example, to display the footer
below just the aside and
6:24
leave an empty space below
the main content area,
6:28
replace the main area and
the third string with a period.
6:31
Or you can display the footer
below the main content and
6:39
leave an empty cell below the aside.
6:42
You're able to use one or any number of
dots to represent an empty grid cell,
6:51
for example, three as long as
there are no spaces between them.
6:57
Developers often refer to this as
the ASCII method of grid layout.
7:06
Because it resembles the ASCII design
technique where you form pictures or
7:11
art out of special ASCII characters.
7:16
So I suggest experimenting
with grid-template-areas
7:18
to see how quickly you're able to
create different layout combinations.
7:21
They're not only useful,
but also fun to use.
7:26
In fact, I'll create a grid-template-areas
practice challenge for you now.
7:29
In the index.html file, let's add
a new item to the grid container.
7:33
So I'll include a nav
element below the header.
7:39
Then in the grid container rule,
add a third column track.
7:46
So I'll write 1fr as the first track.
7:50
And I'll leave it up to you to place the
new item on the grid using grid-area and
7:54
grid-template-areas.
7:58
I'll show you my solution
in the next video.
8:00