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
- HTML
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;
}
<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>
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
- HTML
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;
}
<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>
The snippet above used the grid-row-end
property to end grid-item1
at row line 5
.
Example 3: How to Span the Selected Grid Item across Three Rows
- CSS
- HTML
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;
}
<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>
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.