Skip to main content

grid-row-start Property in CSS Grid Layouts

grid-row-start specifies where the selected grid item should start (or span) along the grid container's column (block) axis.

The grid-row-start property accepts the following values:

  • auto
  • <row-line-number>
  • span <number-of-rows>

Example 1: Auto-Start the Selected Grid Item Following the Normal Row Flow

section {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
background-color: orange;
margin: 50px;
min-height: 300px;
}

div {
border: 1px solid black;
background-color: purple;
color: white;
padding: 20px;
border-radius: 5px;
}

.grid-item1 {
grid-row-start: auto;
}

Try it on StackBlitz

The snippet above used the auto value to auto-start grid-item1 according to the normal row layout flow.

Example 2: Start the Selected Grid Item at Row Line 3

section {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
background-color: orange;
margin: 50px;
min-height: 300px;
}

div {
border: 1px solid black;
background-color: purple;
color: white;
padding: 20px;
border-radius: 5px;
}

.grid-item1 {
grid-row-start: 3;
}

Try it on StackBlitz

The snippet above used the grid-row-start property to start grid-item1 at row line 3.

Example 3: Span the Selected Grid Item across Two Rows

section {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr 1fr;
background-color: orange;
margin: 50px;
min-height: 300px;
}

div {
border: 1px solid black;
background-color: purple;
color: white;
padding: 20px;
border-radius: 5px;
}

.grid-item1 {
grid-row-start: span 2;
}

Try it on StackBlitz

The snippet above used the span 2 value to span grid-item1 across two rows.

Buy your CSS Flexbox Explained Visually book on Amazon

Overview

This article discussed what a CSS grid-row-start property is. We also used examples to see how it works.

Everything you need to sell courses, webinars, downloads, and community.