W3docs
en
Log in

CSS grid-template-rows Property

The grid-template-rows CSS property defines the line style of the bottom border of an element. Learn how to use its values with examples.

The grid-template-rows property defines the size of the rows in a grid layout. The number of rows is determined by the count of values provided, though it can also be controlled using repeat() with auto-fill or auto-fit. The values are separated by spaces, and each value specifies the row track size.

Info

Besides the main values, there are additional values like fit-content and repeat() that help create flexible and compact grid layouts.

Initial Valuenone
Applies toGrid containers.
InheritedNo.
AnimatableYes. The size of the rows is animatable.
VersionCSS Grid Layout Module Level 1
DOM Syntaxobject.style.gridTemplateRows = "20px 100px";

Syntax

CSS grid-template-rows syntax

grid-template-rows: none | auto | max-content | min-content | <flex> | fit-content | repeat(...) | <length> | <percentage> | minmax() | subgrid | auto-fill | auto-fit;

Note: initial and inherit are standard CSS keywords for resetting or inheriting values, but are rarely needed in modern grid layouts.

Example of the grid-template-rows property:

CSS grid-template-rows code 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;
        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>
Try it Yourself »

Result

CSS grid-template-rows example result

Example of the grid-template-rows property with the specified size of rows:

CSS grid-template-rows another code 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;
        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>
Try it Yourself »

Values

ValueDescription
noneThis is the default value of the property.
autoThe size of the row is determined by its content or available space.
max-contentThe size of each row is determined by the largest intrinsic size of its items.
min-contentThe size of each row is determined by the smallest intrinsic size of its items.
minmax(min, max)Defines a track size as a size range greater than or equal to min and less than or equal to max. Functions as a track sizing function.
<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 (fraction of available space) that specifies the track’s flex factor. Each <flex>-sized track shares remaining space in proportion to its flex factor.
fit-contentRepresents min(max-content, max(auto, argument)). Similar to auto (minmax(auto, max-content)), but ensures the track size is at least the provided argument.
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 widely supported in modern browsers.
subgridIndicates the grid will adopt the spanned portion of its parent grid in the specified axis. The sizes of the grid rows/columns are taken from the parent grid’s definition.
auto-fillPlaces as many fit-able rows into the grid as possible without overflowing the container.
auto-fitSimilar to auto-fill, but collapses empty tracks to zero size.
initialMakes the property use its default value.
inheritInherits the property from its parent element.

Practice

Practice

What does the grid-template-rows property in CSS do?