grid-row#

#Introduction

The grid-row CSS shorthand property specifies a grid item's size and location within a grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area.

This property is a shorthand for the CSS properties: grid-row-start and grid-row-end, thereby specifying the grid item's start and end row positions in a single declaration.

#Syntax

/* <number> values */
grid-row: 1;
grid-row: 1 / 2;
grid-row: 1 / -1;

/* span <number> values */
grid-row: span 2;
grid-row: span 2 / 4;
grid-row: 1 / span 3;

#Values

• auto

  Default value. A keyword indicating that the property contributes nothing to the grid item's placement, indicating auto-placement, an automatic span, or a default span of 1.

• <number>

  Contributes the nth grid line to the grid item's placement. If a negative integer is given, it counts in reverse, starting from the end edge of the explicit grid. An integer value of 0 is invalid.

• span <number>

  Contributes a grid span to the grid item's placement, such that the row start or end edge of the grid item's grid area is n lines from the opposite edge.

#Formal definition

#Formal syntax

grid-row =
  <grid-line> [ / <grid-line> ]?

<grid-line> =
  <number>       |
  span <number>

#Difference between web

• <custom-ident>, span && <custom-ident>, <integer> && <custom-ident>? are not supported.
• In Lynx, the <grid-line> syntax is equivalent to <number> | [span && <number>], and does not support the <custom-ident> values found in the Web standard.

#Compatibility