Using the CSS properties grid-row-start
and grid-row-end
, we can make single grid items take up multiple rows. Remember, we are no longer applying CSS to the outer grid container; we’re adding CSS to the elements sitting inside the grid!
.item { grid-row-start: 1; grid-row-end: 3; }
In this example, the HTML element of class item
will take up two rows in the grid, rows 1 and 2. The values that grid-row-start
and grid-row-end
accept are grid lines.
Row grid lines and column grid lines start at 1 and end at a value that is 1 greater than the number of rows or columns the grid has. For example, if a grid has 5 rows, the grid row lines range from 1 to 6. If a grid has 8 rows, the grid row lines range from 1 to 9.
The value for grid-row-start
should be the row at which you want the grid item to begin. The value for grid-row-end
should be one greater than the row at which you want the grid item to end. An element that covers rows 2, 3, and 4 should have these declarations: grid-row-start: 2
and grid-row-end: 5
.
It is possible for the value of grid-row-start
to be greater than that of grid-row-end
. Both properties can also each have negative values. Consult the documentation to learn more about how to use these features.
Instructions
Take a look at the CSS rule for the class grid
. Think about what the grid would look like if it were completely filled.
Let’s make this first item take up the fifth and sixth rows of the grid. In the rule for class a
, set grid-row-start
so the item begins in the fifth row.
Set grid-row-end
so the item occupies the fifth and sixth rows.