CSS grid-row-start Property

CSS grid-row-start property specifies the starting position of a grid item within the grid container. It specifies the row-line on which a grid item will start.

By default, each grid item is placed according to the normal flow of the grid items. That is, the very first grid item by default starts at row-line 1. Once the first row is full with items, the next item is placed on the second row-line and so on.

In the example below, we have used grid-row-start: 2; for the very first grid item(item1). Therefore, this item starts at row-line 2 instead of row-line 1. Try it out:

Example:

#item1{
  grid-row-start: 2;
}

We can also use keyword span to define how many rows a grid item will span. In this case, the grid item always starts at row-line 1 and spans vertically downward to the next rows.

For example, if we use grid-row-start: span 3;, the grid item will start at row-line 1 and span the next 3 rows. See the example below:

Example:

#item1{
  grid-row-start: span 3;
}

Note: span 3 is same as 3 span. You can it write either way.


CSS Syntax

The grid-row-start property has the following syntax:

grid-row-start: auto|number|span number|initial|inherit;

Property Values

The grid-row-start property accepts the following values:

autoThis is the default value. The grid items are positioned according to the normal flow of the layout.
numberSpecifies the starting position of a grid item.
span numberDefines how many rows the grid item will span.
initialSets the grid-row-start property to its default value(auto).
inheritInherits the grid-row-start property from the parent element.

General Info

Default Valueauto
InheritedNo
JavaScript Usageelement.style.gridRowStart = “2”