grid-row-end Property in CSS Grid Layouts

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

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

• auto
• <column-line-number>
• span <number-of-columns>

Example 1: How to Auto-End the Selected Grid Item Following the Normal Row Flow

CSS

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-end: auto;
}

HTML

<section>
  <div class="grid-item1">1</div>
  <div class="grid-item2">2</div>
  <div class="grid-item3">3</div>
  <div class="grid-item4">4</div>
  <div class="grid-item5">5</div>
  <div class="grid-item6">6</div>
  <div class="grid-item7">7</div>
  <div class="grid-item8">8</div>
  <div class="grid-item9">9</div>
</section>

Try Editing It

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

Example 2: How to End the Selected Grid Item at Row Line 5

CSS

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: 1;
  grid-row-end: 5;
}

HTML

<section>
  <div class="grid-item1">1</div>
  <div class="grid-item2">2</div>
  <div class="grid-item3">3</div>
  <div class="grid-item4">4</div>
  <div class="grid-item5">5</div>
  <div class="grid-item6">6</div>
  <div class="grid-item7">7</div>
  <div class="grid-item8">8</div>
  <div class="grid-item9">9</div>
</section>

Try Editing It

The snippet above used the grid-row-end property to end grid-item1 at row line 5.

CodeSweetly ads

Use CSS Grid like a pro

Learn CSS Grid with live examples and images.

Check it out

Example 3: How to Span the Selected Grid Item across Three Rows

CSS

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-end: span 3;
}

HTML

<section>
  <div class="grid-item1">1</div>
  <div class="grid-item2">2</div>
  <div class="grid-item3">3</div>
  <div class="grid-item4">4</div>
  <div class="grid-item5">5</div>
  <div class="grid-item6">6</div>
  <div class="grid-item7">7</div>
  <div class="grid-item8">8</div>
  <div class="grid-item9">9</div>
</section>

Try Editing It

The snippet above used the span 3 value to span grid-item1 across three rows.

Overview

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

Your support matters: Buy me a coffee to support CodeSweetly's mission of simplifying coding concepts.

Tweet this article