X

Headline

This is an important message requiring you to make a choice if you're based in the EU.

CSS grid-template-rows Property

The grid-template-rows property defines the size of the rows in a grid layout.

Besides the main values, there are two other values which are experimental technology: "fit-content" and "repeat".

Initial Value none
Applies to Grid containers.
Inherited No.
Animatable Yes. The size of the rows is animatable.
Version CSS Grid Layout Module Level 1
DOM Syntax object.style.gridTemplateRows = "20px 100px";

Syntax

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

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .auto-container {
      display: grid;
      grid-template-columns: auto auto auto auto;
      grid-template-rows: auto auto;
      grid-gap: 10px;
      background-color: #ccc;
      padding: 10px;
      margin-top: 30px;
      }
      .auto-container > div {
      background-color: #eee;
      text-align: center;
      padding: 30px 0;
      font-size: 30px;
      }
    </style>
  </head>
  <body>
    <h2>Grid-template-rows property example</h2>
    <div class="auto-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>
  </body>
</html>

In this example the size of the first row is 100px, and the size of the second one is 300px:

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .grid-container {
      display: grid;
      grid-template-columns: auto auto auto auto;
      grid-template-rows: 100px 300px;
      grid-gap: 10px;
      background-color: #ccc;
      padding: 10px;
      }
      .grid-container > div {
      background-color: #eee;
      text-align: center;
      padding: 20px 0;
      font-size: 30px;
      }
    </style>
  </head>
  <body>
    <h2>Grid-template-rows property example</h2>
    <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>
  </body>
</html>

Values

Value Description
auto The size of the rows takes up the size of the container. This is the default value of the property.
max-content The size of each rows depends on the largest item in the rows.
min-content The size of each rows depends on the smallest item in the rows.
minmax(min.max) The size range is greater than or equal to "min" and less than or equal to "max".
<length> The size of the rows is specified by length value.
<percentage> The size of the rows is specified by percentages.
<flex> A non-negative dimension with the unit "fr" that specifies the track’s flex factor. Each <flex>-sized track shares remaining space in proportion to its flex factor.
fit-content Represents the min(max-content, max(auto, argument)), which is similar to auto (i.e. minmax(auto, max-content)), but the size is greater than the auto minimum. This value is considered to be experimental.
repeat Represents a repeated fragment of the track list, allowing a large number of rows that exhibit a recurring pattern to be written in a more compact form.This value is considered to be experimental.
initial Makes the property use its default value.
inherit Inherits the property from its parents element.

Browser support

57.0+ 16.0+ 52.0+ 10.1+ 44.0+

Practice Your Knowledge

All values from the list below are correct for grid-template-rows property, except



Do you find this helpful?

Related articles