216 Chapter 17
I’ll illustrate how to use them. Take a look at all of the individual prop-
erties applied to the same element:F {
grid-column-start: 2;
grid-column-end: 3;
grid-row-start: 1;
grid-row-end: span 3;
}Using the shorthand properties, you can write these in a much more
manageable way:F {
grid-column: 2 / 3;
grid-row: 1 / span 3;
}If even two properties are too much for you, you can actually combine all
of these instructions in a single shorthand rule, grid-area, which covers all
four properties. Here’s the basic syntax:F { grid-area: row-start / column-start / row-end / column-end; }Inserting the appropriate values gives us this very terse—although,
arguably, harder to read—rule:F { grid-area: 1 / 2 / span 3 / 3; }Repeating Grid Lines
Although simple grids are fine for some real-world situations, more com-
plex grids give you finer control over content. Having upward of 12 columns
in large typographic grids is quite common, and each column usually has
a gutter (empty space) between it and its neighbor. Defining a grid of 12
columns could be repetitive using the Grid Layout syntax, as you can see
in this example code where I’ve mapped out 12 columns of 1fr each, with a
gutter of 10px between them:E { grid-template-columns: 1fr 10px 1fr 10px 1fr 10px 1fr 10px 1fr 10px 1fr
10px 1fr 10px 1fr 10px 1fr 10px 1fr 10px 1fr 10px 1fr; }You can use the repeat() function to avoid this type of repetition when
using larger grids. This function takes two arguments: an integer that sets
the number of repetitions, followed by a comma separator, and the grid line
values to be repeated. For example, the following rule creates the same grid