grid-template-rows Property in CSS Grid Layouts

grid-template-rows specifies the number and heights of rows browsers should display in the selected grid container.

Example 1: How to Create a Three-Row Grid Container

CSS

section {
  display: grid;
  grid-template-rows: 95px 1fr 70px;
  background-color: orange;
  margin: 10px;
  padding: 7px;
}

div {
  background-color: purple;
  color: white;
  margin: 5px;
  padding: 10px;
  border-radius: 5px;
}

HTML

<section>
  <div>1</div>
  <div>2</div>
</section>

Try Editing It

The snippet above used the grid-template-rows property to display three rows of different heights in the selected <section> grid container.

CodeSweetly ads

Learn CSS Grid with Images

Use beautiful images to learn CSS Grid.

Find out more

note

We used the fr (fraction) unit to scale the second row relative to the fraction of available space in the grid container.

Example 2: How to Create a Three-Row and Four-Column Grid Container

CSS

section {
  display: grid;
  grid-template-rows: 90px 300px 1fr;
  grid-template-columns: auto auto auto auto;
  background-color: orange;
  margin: 10px;
  padding: 7px;
}

div {
  background-color: purple;
  color: white;
  margin: 5px;
  padding: 10px;
  border-radius: 5px;
}

HTML

<section>
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
  <div>11</div>
  <div>12</div>
</section>

Try Editing It

The snippet above used the grid-template-rows property to display three columns of different heights in the selected <section> grid container.

note

You can use the grid-auto-rows property to specify default row heights for all the grid container's rows. For instance, grid-auto-rows: 100px will set default heights of 100px for all rows. But a grid-template-rows declaration will override it.

tip

• Use the CSS repeat() function to specify grid-template-rows values with repeated patterns.
• Use the CSS row-gap property to create gaps between grid rows.

Overview

This article discussed what a CSS grid-template-rows 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.

Join CodeSweetly Newsletter