CSS grid-rowProperty
Example
The following example sets "item1" to span two rows:
.item1 {
grid-row: 1 / span 2;
}
Try it Yourself »
Browser Support
The numbers in the table indicate the first browser version that supports this property.
| Property | |||||
|---|---|---|---|---|---|
| grid-row | 57 | 16 | 52 | 10 | 44 |
Property definition and usage instructions
The grid-row property defines the start and end positions of a grid element's row.
Note:grid-row is the shorthand property for the grid-row-start and grid-row-end properties.
We can set grid elements by referring to line numbers, or use the keyword "span" to define the number of rows the element will span.
| Default Value: | auto |
|---|---|
| Inherited: | no |
| animation: | Supported.Read Aboutanimatable Try it Yourself |
| version: | CSS Grid Layout Module Level 1 |
| JavaScript Syntax: | object.style.gridRow="2 / span 2" Try it Yourself |
Syntax
grid-row: grid-row-start / grid-row-end;
| Value | Description |
|---|---|
| grid-row-start | Specifies on which line to start displaying the grid element. |
| grid-row-end | Specifies the line where the grid element stops displaying, or how many rows to span. |
More Examples
The following example sets "item1" to start at row 1 and end before row 4:
Related Articles
CSS Tutorial:CSS Grid Layout
other extensions