grid-row
Summary
Gets or sets a value that indicates which row an element within a Grid should appear in. Shorthand for setting grid-row-start and grid-row-end in a single declaration.
Overview table
- Initial value
See individual properties- Applies to
- Grid items
- Inherited
- No
- Media
- visual
- Computed value
- See individual properties
- Animatable
- No
- Percentages
- See individual properties
Syntax
grid-row: <grid-line> [ / <grid-line> ]
Values
- <grid-line> [ / <grid-line> ]
- If two <grid-line> values are specified, the grid-row-start property is set to the value before the slash, and the grid-row-end property is set to the value after the slash.
When the second value is omitted, then if the first value is an identifier (<ident>), the grid-row-end property is also set to that <ident>; otherwise, it is set to "auto".
Examples
/*
The shorthand syntax
*/
grid-row: 1 / 3;
/*
is equivalent to
*/
grid-row-start: 1
grid-row-end: 3;
Related specifications
- W3C Grid Layout Module
- W3C Working Draft