218 Chapter 17
Each string of identifiers represents a grid row, so to add a new row,
you just add a new string. If you use the same identifier multiple times in
the same string, the area will span that number of columns. If you use the
same identifier in the same position in different rows, the area will span
that number of rows. You can see what I mean in the following code; in the
first row, one column is called nav and two are called head, so the head area
will span two columns; the second row also has a first column called nav, so
the nav area will span two rows:E {
display: grid;
grid-template-areas:
'nav head head'
'nav main side';
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 80px auto;
}Using this code, you can place grid items into areas that span multiple
tracks. In the following snippet, element F is placed into the head area, mean-
ing it spans the second and third columns of the first row, and element G
will be placed into the nav area, making it span the first and second row in
the first column. This is shown in Figure 17-8.F { grid-area: head; }
G { grid-area: nav; }Figure 17-8: Items placed on the grid in named areas (lines added for clarity)WArninG If you use multiple string identifiers, you must use the same number of columns in
each grid; otherwise, the rule will be declared invalid and be ignored.The grid-template Shorthand
To avoid having to write three separate rules to define a grid (grid-template-
columns, grid-template-rows, and grid-template-areas), you can use the grid-
template shorthand. This shorthand makes defining your columns and rows,
without named areas, simple. Here’s an example:E { grid-template: grid-template-columns / grid-template-rows; }