212 Chapter 17
And making one of those columns 3fr in width means the remaining
width is divided into four equal portions of 50px each, making 1fr equal to
50px and 3fr equal 150px:E { grid-template-columns: 100px 100px 200px 1fr 3fr; }Returning to the first example in this section, you could replace the
percentages with the fr unit to achieve the same result:E { grid-template-columns: 1fr 3fr 1fr; }noTe See “Fractions vs. Percentages” on page 213 for an explanation of the advantages of
using fractions for laying out grids.This code actually defines three grid lines, with an additional one
automatically created at the start of the writing direction (which is left, in
languages written from left to right). These lines create three vertical grid
tracks, or columns, as shown in Figure 17-2.Figure 17-2: A simple three-column grid in the ratio 1:3:1 (grid lines and numbers
added for clarity)You add rows in the same way. For example, to create three rows with
the first one 60px high, the second with the value of auto so it’s as high as its
content, and the third 5em high, you could use this code:E { grid-template-rows: 60px auto 5em; }Combining these properties lets you fully define your grid. For example,
this code creates a basic grid of three columns and three rows, for a total of
nine cells:E {
display: grid;
grid-template-columns: 1fr 3fr 1fr;
grid-template-rows: 60px auto 5em;
}The columns of this grid are distributed in the ratio 1:3:1, and the rows
are 60px at the top, 5em at the bottom, with a central row set to automatic
height to accommodate its content. The resulting grid looks something like
Figure 17-3.