In this section, we will learn what the grid-row-end property is and how to use it in CSS.

Click here to run the example of grid-row-end property.

CSS grid-row-end Property Definition and Usage

After we’ve created our CSS grid, by default, grid-items will be automatically positioned on each cell of that grid. But this is the default behavior and we can decide where on the grid we want each grid-item to be positioned.

Now, using the `grid-row-end` property, we can declare the line number or line name that the bottom edge of the target item should be placed on.

Also, there’s another property named `grid-row-start` which declares the line number or line name that the top edge of the target item should be placed on.

Note: These two elements usually come together.

CSS grid-row-end Property Syntax

grid-row-end: auto|row-line-number| row-line-name|span n;

CSS grid-row-end Property Value

• row-line-number: Using this value, we can determine what line number the bottom edge of the target item should be placed on.
• row-line-name: this value is actually the name of the grid’s line we want the bottom edge of the target item to be placed on.

Also, there’s a keyword named “span” which can be used as the value of this property. Here’s the syntax:

grid-row-end: span number-of-tracks;

• span: this is the keyword and that means a number of tracks.
• Number-of-track: this is the number of tracks we want the grid-item to expand on.

Example= grid-row-end: span 3; // means expand the target item in 3 rows.

Note: the value “auto” is the default value. This means the item will span in one row.

Example: grid-row-end property in CSS

See the Pen grid-row-end property in CSS by Omid Dehghan (@enjoytutorials1) on CodePen.