CSS grid-row-start Property

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

Description

The grid-row-start property controls the starting row line for a grid item within a CSS Grid layout, determining where the item's start edge is aligned along the vertical axis of the grid. As a line-based placement property, it addresses the grid's track lines (including named lines) rather than directly targeting tracks by index or size, so it is used to place the item relative to the grid’s row grid lines and influences how much vertical track space the item occupies when combined with the opposite edge placement.

Placement via grid-row-start is typically considered together with the corresponding end-side placement, which determines the item's vertical span and position; the complementary property that governs the opposite edge is grid-row-end. There is also a shorthand that combines both start and end into a single declaration for convenience and clearer intent: grid-row. Using these together makes it straightforward to express whether an item is anchored to a particular line, extends across several implicit or explicit tracks, or sits at a specific named line.

How the start line you choose actually maps to visual rows depends on how the grid itself is defined. The grid’s explicit row structure is created by declarations such as grid-template-rows, and any placement that falls outside the explicit grid can trigger the creation of implicit tracks whose sizing is controlled by grid-auto-rows. Named lines defined in the template allow semantic placement by name, and placing an item beyond the current explicit range can expand the grid and affect layout flow and alignment.

In practice, using grid-row-start affects layout behavior beyond mere position: it interacts with auto-placement algorithms, can cause overlap with other items if multiple items target the same lines, and works together with horizontal placement properties (for example, grid-column-start) to fix an item’s two-dimensional location. Understanding how it relates to the grid’s line numbering and naming, and how it pairs with end-side placement and the grid’s template and auto-sizing rules, is key to controlling vertical placement in complex grid layouts.

Definition

Initial value: auto
Applies to: Grid items and absolutely-positioned boxes whose containing block is a grid container
Inherited: No
Computed value: As specified
Animatable: Yes
JavaScript syntax: object.style.gridRowStart

Interactive Demo

grid-row-start: auto;

grid-row-start: 3;

grid-row-start: -1;

grid-row-start: span 2;

One

Two

Three

Syntax

rid-row-start: auto | line | line-name | span line

Values

autoA keyword indicating that the property does not affect the placement of the element in the grid layout (automatic placement, automatic range, or default range of 1). This is the default value.
lineAn integer that corresponds to the initial face of the element in the grid layout (counting the faces is left to right from the left edge of the element, a schematic display at the top of the page). If a negative integer is specified, then the count is in the reverse order, starting from the end edge of the explicit layout grid. A value of 0 is not valid.
line-nameA string value that refers to a named column in a grid layout. The element is located from the initial face of the specified element.
span lineThe span keyword with an integer that determines how many columns the grid element will span. If an integer is omitted, the default value is 1. A negative value or a value of 0 is not valid.

Example

HTML

<div class='grid'>

  <div class='item item1'>Item 1</div>

  <div class='item item2'>Item 2 (grid-row-start: 3)</div>

  <div class='item item3'>Item 3</div>

  <div class='item item4'>Item 4</div>

</div>

CSS

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(4, 80px);
  gap: 12px;
  max-width: 600px;
  margin: 20px auto;
  padding: 12px;
  background: #f6f7fb;
  border-radius: 8px;
}

.item {
  background: #4f46e5;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  font-weight: 600;
}

/* Example: move this item to start on row 3 */
.item2 {
  grid-row-start: 3;
  background: #ef4444;
}

Result

Editor

Browser Support

The following information will show you the current browser support for the CSS grid-row-start property. Hover over a browser icon to see the version that first introduced support for this CSS property.