Grid Layout 217
as in the previous example, but much more concisely; it defines one track
that is 1fr wide and then uses repeat() to create a pattern of a 10px gutter
followed by a 1fr column eleven times, for a total of 12 columns of 1fr each.
E { grid-template-columns: 1fr repeat(11, 10px 1fr); }
Named Grid Areas
In addition to placing items in a grid based on coordinates, you can also
place items in named areas with the grid-template-areas property. With this
property, you can give grid areas specific names using a series of unique
identifiers in strings of text. Here, I’ll show you what I mean:
E {
display: grid;
grid-template-areas: 'a b c';
grid-template-columns: repeat(3, 1fr);
}
Two of these rules should be familiar now: line sets the element to act
as a grid container, and line creates three columns of 1fr each. Line
uses the grid-template-areas property to name each of the columns: each
identifier in the space-separated string (a, b, and c) is matched to the col-
umns, in turn. This output is shown in Figure 17-7.
Figure 17-7: Three columns made with named areas
To place an item using a named area, you use the area’s identifier as
a value for the grid-area property. For example, to place an item in the
middle (b) column of my example grid, I use this:
F { grid-area: b; }
You don’t have to use single characters to name areas, as I’ve done here;
you can use any string of characters, as long as they don’t contain a space.
For example, to make your content more human-readable, you may want to
describe the purpose of each area. Here’s an example:
E { grid-template-areas: 'nav main side'; }
F { grid-area: main; }
