CSS grid-row Property

Description

The grid-row CSS property is used in conjunction with CSS Grid Layout to define the placement and spanning of grid items along the vertical axis (rows) within a grid container. It allows you to specify the starting and ending row lines for an element, determining its position within the grid. You can use values like line numbers, keywords (such as "span" to specify the number of rows to span), and fractional units to create flexible and responsive layouts. This property provides precise control over the placement of grid items within the grid container, making it a fundamental tool for building complex, responsive web layouts. Individual properties are: grid-row-end and grid-row-start.

Initial value: See individual properties
Applies to: Grid Items
Inherited: No
Computed value: See individual properties
Animatable: No
JavaScript syntax: object.style.gridRow

Syntax

grid-row: rid-row-start | grid-row-end

Values

grid-row-startSpecifies on which row to start displaying the item.
grid-row-endSpecifies on which row-line to stop displaying the item, or how many rows to span.

Example

HTML

<div id="grid">

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

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

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

</div>

CSS

#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;
}

Result