CSS grid-row-end Property

The grid-row-end property in CSS defines the grid item's end position within a grid row by specifying the inline edge of its grid area.

Syntax

grid-row-end: value;

• Default Value: auto 

Property Values:

• auto: The grid items span for the default value of one row.
• span int: It specifies the number of rows the item will span.
• integer: It specifies the row on which the item ends.
• initial: It sets the grid-row-end property to its default value.
• inherit: The grid-row-end 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-end property. 

Output:

👁 Image

Example 2: This example describes the container items with the grid-row-end: span n property. 

Output:

👁 Image

Supported Browsers: The browser supported by grid-row-end 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
• Internet Explorer not supported