🎯 CSS grid-row-end Property

grid-row-end is a CSS Grid property used to define the ending row position of a grid item. It controls exactly where an element stops vertically inside a grid layout.

This property allows you to precisely control how far a grid item extends within rows, making layout design more flexible and predictable.

grid-row-end: value;
                

Example:

.item {
    grid-row-end: 4;
}
                

This makes the grid item end at row line 4.

The browser automatically determines where the element should end based on grid flow rules.

.item {
    grid-row-end: auto;
}
                

You can define an exact ending row using numeric values.

.item {
    grid-row-end: 4;
}
                

You can also use span to extend an element across multiple rows.

.item {
    grid-row-end: span 2;
}
                

Resets the property to its default value.

.item {
    grid-row-end: initial;
}
                

The following example shows how to control vertical positioning of a grid item using both row start and row end values.

.container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(4, 100px);
}

.item {
    grid-row-end: 4;
}
                

In this example, the item extends until row line 4 inside the grid layout.

The grid-row-end property is useful for controlling the vertical size and position of grid items in CSS Grid layouts. It helps you build structured, flexible, and responsive designs.

• Define where elements stop vertically
• Control grid item height using rows
• Create structured and clean layouts
• Improve responsive grid design control