Grid Layout 215
By default, the item is fitted into the designated cell only, with any
con tent that doesn’t fit overflowing the cell vertically. You can make an item
expand in size to create an area that covers multiple cells in rows or col-
umns by using the grid-column-end and grid-row-end properties. Just like their
counter parts, these properties take a single whole number value, which
designates the line that the cell should end in. For example, to have an item
span three rows, starting at line 1 and ending at 4, here’s the code you use:
F {
grid-row-start: 1;
grid-row-end: 4;
}
The item is placed in the first column by default; it starts at line 1 and
ends at line 4, meaning it spans three rows, as shown in Figure 17-6.
Figure 17-6: An item on the grid spanning three rows of the first column (lines added
for clarity)
As an alternative to the method just shown, you can, instead, use the
span keyword, followed by the number of tracks the item spans. The rewrit-
ten rule looks like this:
F { grid-row-end: span 3; }
The span keyword becomes quite useful when you want to remain
agnostic about the line at which a grid item will start, but you always want
it to span the same number of columns.
Grid Placement Shorthand Properties
Writing four individual properties to place an element in a grid seems
somewhat verbose, and, indeed, shorthand properties will make your code
more terse. The properties in question are grid-column and grid-row, and
each has the same syntax. The first, grid-column, is short for grid-column-start
and grid-column-end, divided by a slash; and the same goes for grid-row being
short for grid-row-start and grid-row-end.
