CSS grid-row-start Property

The grid-row-start property in CSS specifies the starting position of a grid item within a grid row by defining the inline start edge of its grid area.

Syntax

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

Default value: auto 

Property Values:

• auto: It sets the grid-row-start property to its default value of one row.
• span: It specifies the number of rows the item will span.
• integer(row-line): It specifies the row on which the item starts.
• initial: It sets the grid-row-start property to its default value.
• inherit: The grid-row-start property is inherited from its parent.

Note: Don’t initialize the height and width of the items of the container explicitly. If initialized, the span effect can’t be observed.

Example 1: This example describes the container items without the grid-row-start property. 

Output:
👁 Image

Example 2: This example describes the grid-row-start property to auto. 

Output:

👁 Image

Example 3: This example describes the grid-row-start property to span. 

Output:

👁 Image

Example 4: This example describes the grid-row-start property to the row line. 

Output:

👁 Image

Example 5: This example describes the grid-row-start property to initial. 

Output:

👁 Image

Example 6: This example describes the grid-row-start property to inherit. 

Output:

👁 Image

The grid-row-start property in CSS provides precise control over the starting position of grid items within a grid row. By using various values such as auto, span, and specific row lines, developers can create flexible and responsive grid layouts that enhance the design and functionality of web pages.

Supported Browsers: The browser supported by the grid-row-start property are listed below 

• Google Chrome 57.0
• Edge 16.0
• Firefox 52.0
• Safari 10.1
• Opera 44.0