Grid Row Placement Property
Last updated: 2026-09-13
grid-row Grid Row Placement Property
grid-row is the shorthand for grid-row-start and grid-row-end. It positions a grid item along the vertical direction. By specifying the start and end grid-line numbers, you control how many rows the item spans. Together with grid-column, it gives precise control over an item’s position and size.
| Category | |
|---|---|
| Initial Value | auto |
| Inherited | No |
| Applies To | |
| Animation Type | |
| CSS Version | CSS3 |
| Status | Standard |
📝 Syntax
grid-row: <grid-line> [ / <grid-line> ]?;⚙️ Values
| Value | Type | Description |
|---|---|---|
<grid-line> / <grid-line> | Value | Grid row placement |
▶ Example
Edit the code below and see the live result in the playground:
🌐 Browser Support
| Browser |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| grid-row | ✓ v57 | ✓ v16 | ✓ v52 | ✓ v10.1 | ✓ v44 |
| Supported in all major browsers | |||||
Tip： grid-row: span 2 spans two rows, written the same way as grid-column.
Tip： Row lines are numbered from 1 at the top. Negative numbers count from the bottom, and -1 is the bottommost line.
❓ FAQ
QCan grid-row and grid-column be used together?
AYes. The two properties control the vertical and horizontal placement independently - they are orthogonal - and are often combined. For example grid-row: 1 / 3 with grid-column: 2 / 4 makes an item span two rows and two columns. When you only position one direction, the other uses auto placement. To set all four grid-line values at once, use grid-area.
QHow do I make a grid item extend automatically to the end?
AUse grid-row: 1 / -1 to span from the first row to the last. The -1 refers to the final grid line, so the item still ends at the last row even when the number of rows changes. Likewise grid-column: 1 / -1 makes an item span the full width of a row. Negative indexing is the most practical way to handle an unknown number of tracks in grid placement.
QCan I use grid-row: span 2 alone?
AYes. With only a span value, the start line defaults to auto and the browser places the item at the position chosen by the auto-placement algorithm, then extends it down two rows - good for lists with an unknown item count. To also control the start position, write grid-row: 2 / span 2, meaning start at line 2 and span two rows downward. The span form is more stable than a hard-coded end line when the lines are rearranged.
🏷️ Related Properties
💡 Related Cases
📚 Related Tutorials
Grid Column Placement
Positions a grid item horizontally
Grid Area Shorthand
Shorthand that places an item on rows and columns at once
