We can use the property grid-row
as shorthand for grid-row-start
and grid-row-end
. The following two code blocks will produce the same output:
.item { grid-row-start: 4; grid-row-end: 6; }
.item { grid-row: 4 / 6; }
This code should look similar to the way grid-template
is shorthand for grid-template-rows
and grid-template-columns
. In this case, the starting row goes before the “/“ and the ending row goes after it. Again, the ending row is exclusive; this grid item will occupy rows four and five.
When an item spans multiple rows or columns using these properties, it will also include the gap
if any exists. For example, if an item spans two rows of height
100 pixels and there is a ten-pixel gap
, then the item will have a total height of 210 pixels.
Instructions
Refactor your code from the last exercise. Replace grid-row-start
and grid-row-end
with grid-row
. Make sure the item still takes up rows five and six.