Dofactory.com
Dofactory.com
Earn income with your CSS skills
Sign up and we'll send you the best freelance opportunities straight to your inbox.
We're building the largest freelancing marketplace for people like you.
By adding your name & email you agree to our terms, privacy and cookie policies.

CSS grid-template-rows

Grid is a layout system that uses a grid with rows and columns.

The grid-template-rows property specifies grid rows.

The value is a space-separated list with row heights.

Example

#

A grid container with 2 rows that are 50px and 100px high respectively.

1
2
3
4
5
6
7
8
<style>
  .grid-container {
    background-color: steelblue;
    padding: 10px;
    display: grid;
    grid-gap: 10px;
    grid-template-columns: auto auto auto auto;
    grid-template-rows: 50px 100px;
  }

  .grid-container > div {
    background-color: aliceblue;
    text-align: center;
    padding: 15px;
    font-size: 18px;
  }
</style>

<div class="grid-container">
  <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> 

Syntax

grid-template-rows: none | auto | max-content | 
       min-content | length | initial | inherit;

Values

#

Value Description
none Rows are created if needed
auto Rows size is determined by the container size and on the size of the content of the items in the row
max-content Sets the row size depending on the largest row item
min-content Sets the row size depending on the smallest row item
length Sets the size of the row, by using any CSS legal length value.
initial Sets the value to its default value.
inherit Inherits the value from its parent element.

More Examples

Click the buttons to see the different grid-template-rows values.

1
2
3
4
5
6
7
8
<style>
  .grid-template-rows-example {
    background-color: steelblue;
    padding: 10px;
    display: grid;
    grid-gap: 10px;
    grid-template-columns: auto auto auto auto;
    grid-template-rows: none;
  }

  .grid-template-rows-example > div {
    background-color: aliceblue;
    text-align: center;
    padding: 15px;
    font-size: 18px;
  }
</style>

<div class="grid-template-rows-example">
  <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>

Browser support

This table shows when grid-template-rows support started for each browser.

Chrome
57 Mar 2017
Firefox
52 Mar 2017
IE/Edge
16 Sep 2017
Opera
44 Mar 2017
Safari
10 Sep 2016

You may also like


Last updated on Sep 30, 2023

Earn income with your CSS skills
Sign up and we'll send you the best freelance opportunities straight to your inbox.
We're building the largest freelancing marketplace for people like you.
By adding your name & email you agree to our terms, privacy and cookie policies.

Guides