Gridrowstart

Grid-row-start is a CSS Grid Layout property that determines the starting grid line for an item on the row axis, thereby controlling its vertical placement within a grid container. It is typically used together with grid-row-end or the shorthand grid-row to fix an item’s vertical span.

The value of grid-row-start can be a line number (for example 2), a named grid line defined in the container, or the keyword span followed by a number (for example span 2) to make the item span multiple rows. The keyword auto means the browser places the item automatically according to the grid’s auto-placement algorithm. grid-row-start itself specifies the start point, while grid-row-end can specify the end point.

A common pattern is grid-row-start: 2; grid-row-end: 4;, which places the item from row line 2 up to, but not including, line 4 (covering two rows). The shorthand grid-row: 2 / 4 achieves the same result, and grid-row: 2 / span 3 places the item on the second row line and spans three rows.

Notes: This property affects placement only along the vertical axis and requires a grid container (display: grid). Its values may reference lines defined by the grid’s template rows, or they can refer to the implicit grid. Named lines are useful when you name rows in the grid template, while numeric lines work without naming. In some cases, alignment properties may interact with the final placement.

See also grid-row-end, grid-column-start, grid-column-end, grid-area.