CSS grid-row Property

Description

The grid-row property 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.

Initial value

See individual properties

Applies to

Grid Items

Inherited

No

Media

Visual

Computed value

See individual properties

Animatable

No

CSS Version

CSS3

JavaScript syntax

object.style.gridRow

Syntax

grid-row: <grid-line> [ / <grid-line> ]?
where 
<grid-line> = auto | <custom-ident> | [ <integer> && <custom-ident>? ] | [ span && [ <integer> || <custom-ident> ] ]

Values

• <grid-line> [ / <grid-line> ]

Example

<div id="grid">

  <div id="item1"></div>

  <div id="item2"></div>

  <div id="item3"></div>

</div>

#grid {
  display: grid;
  height: 200px;
  grid-template-columns: 200px;
  grid-template-rows: repeat(6, 1fr);
}
#item1 {
  background-color: lime;
}
#item2 {
  background-color: yellow;
  grid-row: 2 / 4;
}
#item3 {
  background-color: blue;
  grid-row: span 2 / 7;
}

Browser Support

Desktop
X	16	57	52	44	10.1
Tablets / Mobile
57	57	52	43	10.3	6.0

Last updated by CSSPortal on: 3rd November 2019