The grid-row CSS property is a shorthand for specifying a grid item's size and location within a grid row. It combines grid-row-start and grid-row-end.

Understanding Grid Lines

Grid layout operates on a system of lines. In a 4x4 grid, there are 5 row lines. Row lines are numbered starting from 1 at the top edge of the grid container.

Syntax Breakdown

The syntax uses a forward slash to separate start and end values:

/* start-line / end-line */
grid-row: 1 / 3;

/* start-line / span n */
grid-row: 2 / span 2;

The span Keyword

Often, you don't know the exact end line number, but you know the item should take up 2 rows. The span keyword tells the browser to extend the item across a specific number of tracks from its start position.

Best Practices

Use grid-row to simplify your CSS. Instead of writing two separate properties, you can handle placement in one line. Named grid lines can also be used for more semantic layouts in complex applications.