🎯 CSS grid-row-start Property

grid-row-start is a CSS Grid property used to define the starting row position of a grid item. It allows precise control over where an element begins vertically inside a grid layout.

With this property, you can position grid items exactly at a specific row line, making layout control more flexible and predictable.

grid-row-start: value;
                

Example:

.item {
    grid-row-start: 2;
}
                

This places the grid item starting at row line 2.

The browser automatically determines the starting row based on the grid layout flow.

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

You can explicitly define the starting row using numeric values.

.item {
    grid-row-start: 2;
}
                

You can also use span to control how many rows the item occupies.

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

Resets the property to its default value.

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

The following example shows how to position a grid item vertically inside a grid layout.

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

.item {
    grid-row-start: 2;
}
                

In this example, the item starts at the second row line and is placed vertically within the grid.

The grid-row-start property is useful when you need precise vertical control in CSS Grid layouts. It helps you build structured and responsive designs with better layout accuracy.

• Control vertical placement of grid items
• Create structured grid layouts
• Improve responsive design control
• Place elements precisely in rows