CSS propertyGrid
grid-row
Sets which grid rows an item starts and ends in.
- Initial value
auto- Inherited
- No
- Animatable
- no
- Applies to
- grid items and absolutely positioned elements inside a grid container
- JavaScript
element.style.gridRow = "span 2"
Example
#CSS
.dashboard {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: 60px;
gap: 8px;
}
.dashboard .stats {
grid-row: span 2;
}Example HTML
<div class="dashboard stage">
<div class="box stats">Stats</div>
<div class="box">EXP</div><div class="box">Streak</div><div class="box">Fuel</div><div class="box">Cards</div>
</div>Preview
Definition and usage
#The grid-row property is a shorthand for grid-row-start and grid-row-end. It works just like grid-column, only vertically: 1 / 3 means the first two rows, and span 2 a span of two rows.
Stretching items across several rows is handy in galleries and dashboards, where one tile needs to be taller than the rest.
If an item reaches beyond the defined rows, the grid adds implicit rows with the height from grid-auto-rows.
Syntax
#Syntax
grid-row: <start> [ / <end> ]?;Values
#Values in practice
#auto
The item takes up one row.
.target { grid-row: auto; }span 2
The item is twice as tall and spans two rows.
.target { grid-row: span 2; }2 / 3
The item moves to the second row.
.target { grid-row: 2 / 3; }Browser support
#Widely available
Works in all modern browsers, phones included. You can use it without worry.
- Chrome
- Edge
- Firefox
- Safari
Good practices
#- Combine
grid-rowwithgrid-columnto place an item precisely on both axes. grid-template-areasandgrid-areaare more convenient for placing items by name.
Related entries
#Spotted a mistake or missing an example? Write to us.