Definition
The grid-row CSS property is a shorthand property that combines both grid-row-start and grid-row-end properties. It is used in grid layouts to specify the starting and ending positions of a grid item along the vertical axis.
The grid-row property accepts values that represent the grid lines at which the grid item should start and end. Grid lines can be identified using line numbers, names of named grid lines, or the span keyword to span across multiple grid tracks.
Here’s an example:
.grid-item {
grid-row: 2 / 4;
}
In this example, the grid-row: 2 / 4; rule sets the grid item to start at the second grid line and end at the fourth grid line vertically. This means the grid item will span across two grid tracks.
The grid-row property provides a convenient way to specify both the starting and ending positions of a grid item along the vertical axis. It simplifies the declaration of grid placement and allows for more concise grid layout code.