214 Chapter 17
Placing Items in an Explicit Grid
Every immediate child of a grid container becomes a grid item and should
be placed in the grid. To do so, you assign the item a cell coordinate using
a set of placement properties. The first of these are grid-column-start and
grid-row-start, and each takes a single whole number as a value. This num-
ber refers to the line at the start of a grid track (whether a column or a
row), and the combined track references create the coordinate of a cell.
For example, to place an item in the cell in the second row of the sec-
ond column, you use this code (Figure 17-4 shows the result):F {
grid-column-start: 2;
grid-row-start: 2;
}Figure 17-4: An item placed on the grid in the second row of the second column (lines
added for clarity)The default value of both the grid-column-start and grid-row-start
properties is 1, so omitting either value places the item in the first row or
column. For example, the following code places the item in the cell in the
second column of the first row, as shown in Figure 17-5:G { grid-column-start: 2; }Figure 17-5: A second item placed on the grid in the second column, first row (lines
added for clarity)