CSS grid-row Property

The grid-row property in CSS is used to define the size and position of a grid item within a grid layout. It combines the grid-row-start and grid-row-end properties to specify the item's start and end positions along the row axis.

👁 Image
Syntax:

grid-row: grid-row-start|grid-row-end;

Property Values

1. grid-row-start:

Specifies the row line where the item will start.

Example:

Output:

👁 Image

2. grid-row-end:

Specifies the row line where the item will end or how many rows the item will span.

Example:

Output:

👁 Image

The grid-row property in CSS provides precise control over grid item placement along the row axis, enhancing the flexibility and responsiveness of web layouts. By using this property, developers can create complex, adaptive grid structures that improve user experience across various devices.

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

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