CSS grid-row attribute

Definition and usage

The grid-row property specifies the size of the grid item and its position in the grid layout, and it is a shorthand property for the following properties:

See also:

CSS Tutorial:CSS Grid Layout

Example

Example 1

Make "item1" start at line 1 and span two rows:

.item1 {
  grid-row: 1 / span 2;
}

Try it yourself

Example 2

You can use the line number value instead of the number of rows to span:

.item1 {
  grid-row: 1 / 3;
}

Try it yourself

CSS Syntax

grid-row: grid-row-start / grid-row-end;

Attribute value

Value Description
grid-row-start Specifies from which line to start displaying items.
grid-row-end Specifies where to stop displaying items on a line, or how many rows to span.

Technical details

Default value: auto / auto
Inheritance: No
Animation creation: Supported. See also:Animation-related properties.
Version: CSS Grid Layout Module Level 1
JavaScript Syntax: object.style.gridRow="2 / span 2"

Browser Support

The numbers in the table indicate the first browser version that fully supports this attribute.

Chrome IE / Edge Firefox Safari Opera
57 16 52 10 44