🎯 CSS grid-row Property

grid-row is a CSS Grid shorthand property that defines both the starting and ending row positions of a grid item in a single line. It helps simplify vertical placement in CSS Grid layouts.

Instead of using grid-row-start and grid-row-end separately, you can combine them using a single shorthand property.

grid-row: start-line / end-line;
                

Example:

.item {
    grid-row: 2 / 4;
}
                

This places the grid item starting at row line 2 and ending at row line 4.

The browser automatically determines both the starting and ending row positions based on grid placement rules.

.item {
    grid-row: auto;
}
                

You can define exact start and end row lines to control vertical placement precisely.

.item {
    grid-row: 1 / 3;
}
                

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

.item {
    grid-row: span 2;
}
                

Resets the property to its default value.

.item {
    grid-row: initial;
}
                

The following example demonstrates how to position an element vertically inside a CSS Grid layout using the grid-row shorthand property.

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

.item {
    grid-row: 2 / 4;
}
                

In this example, the item starts at row line 2 and ends at row line 4, spanning multiple rows in the grid layout.

The grid-row property is widely used in modern CSS Grid layouts to control vertical placement efficiently. It improves code readability and reduces repetition by combining two properties into one.

• Control vertical placement of grid items
• Simplify CSS code using shorthand syntax
• Create structured and responsive layouts
• Improve layout precision and flexibility
• Combine start and end row control in one line