CSS - grid-template-rows Property

Quiz

CSS grid-template-rows property is used to define the number and size of rows in a grid layout. The values are space separated list.

Syntax

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

Property Values

Value	Description
none	The rows may be created if needed. Default.
auto	The size of the row depends on the size of the container and on the size of the content of items in the rows.
max-content	The size of each row with this value depends on the size of the largest item in the row.
min-content	The size of each row with this value depends on the size of the smallest item in the row.
length	The size of the rows is specified in length units (e.g. px,em etc.)

Examples of CSS Grid Template rows Property

The following examples explain the grid-template-rows property with different values.

Grid Template Rows Property with None Value

To not define any explicit row sizes for the grid container, we use the none value. It effectively resets the row definitions, and the grid will not use any defined row structure. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .grid-container {
         display: grid;
         grid-template-rows: none;
         grid-gap: 10px;
         background-color: lightgray;
         padding: 10px;
      }

      .grid-container>div {
         border: 3px solid blue;
         color: white;
         background-color: #4d4dff;
         text-align: center;
         padding: 20px;
      }
   </style>
</head>

<body>
   <h2>
      CSS grid-template-rows property
   </h2>
   <h4>
      grid-template-rows: none
   </h4>
   <div class="grid-container">
      <div>
         Item-1
      </div>
      <div>
         Item-2
      </div>
      <div>
         Item-3
      </div>
      <div>
         Item-4
      </div>
   </div>

</body>

</html>

Grid Template Rows Property with Auto Value

To allow rows to adjust their size automatically based on their content, we use the auto value. Each row will be as high as necessary to fit its content. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .grid-container {
         display: grid;
         grid-template-columns: auto auto auto;
         grid-template-rows: auto auto auto;
         grid-gap: 10px;
         background-color: lightgray;
         padding: 10px;
      }

      .grid-container>div {
         border: 3px solid blue;
         color: white;
         background-color: #4d4dff;
         text-align: center;
         padding: 20px;
      }
   </style>
</head>

<body>
   <h2>
      CSS grid-template-rows property
   </h2>
   <h4>
      grid-template-rows: auto auto auto 
      (3 rows are created and sizes depend
      on the size of container and content of items)
   </h4>
   <div class="grid-container">
      <div>
         Item-1
      </div>
      <div>
         Item-2
      </div>
      <div>
         Item-3
      </div>
      <div>
         Item-4
      </div>
      <div>
         Item-5
      </div>
      <div>
         Item-6
      </div>
      <div>
         Item-7
      </div>
      <div>
         Item-8
      </div>
      <div>
         Item-9
      </div>
   </div>

</body>

</html>

Grid Template Rows Property with Max Content Value

To make a row as high as its content requires, without any truncation or wrapping, we use the max-content value. The row will expand to fit the longest content it contains, regardless of the grid container's size. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .grid-container {
         display: grid;
         grid-template-columns: auto auto auto;
         grid-template-rows: 
         max-content max-content max-content;
         grid-gap: 10px;
         background-color: lightgray;
         padding: 10px;
      }

      .grid-container>div {
         border: 3px solid blue;
         color: white;
         background-color: #4d4dff;
         text-align: center;
         padding: 20px;
      }
   </style>
</head>

<body>
   <h2>
      CSS grid-template-rows property
   </h2>
   <h4>
      grid-template-rows: max-content 
      max-content max-content (3 rows are
      created and sizes depend on the largest
      item in the row)
   </h4>
   <div class="grid-container">
      <div>
         This is Item-1
      </div>
      <div>
         2
      </div>
      <div>
         This is Item-3 in row 1
      </div>
      <div>
         Item-4
      </div>
      <div>
         Item-5
      </div>
      <div>
         Item-6
      </div>
      <div>
         Item-7
      </div>
      <div>
         8
      </div>
      <div>
         Item-9
      </div>
   </div>

</body>

</html>

Grid Template Rows Property with Min Content Value

To make a row as short as possible while still fitting its content without overflow, we use the min-content value. The row will be only as wide as needed to display its content without wrapping, but no narrower. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .grid-container {
         display: grid;
         grid-template-columns: auto auto auto;
         grid-template-rows: 
         min-content min-content min-content;
         grid-gap: 10px;
         background-color: lightgray;
         padding: 10px;
      }

      .grid-container > div {
         border: 3px solid blue;
         color: white;
         background-color: #4d4dff;
         text-align: center;
         padding: 20px;
      }
   </style>
</head>

<body>
   <h2>
      CSS grid-template-rows property
   </h2>
   <h4>
      grid-template-rows: min-content 
      min-content min-content (3 rows 
      are created and sizes depend on the 
      smallest item in the row)
   </h4>
   <div class="grid-container">
      <div>
         Item-1
      </div>
      <div>
         2
      </div>
      <div>
         Item-3
      </div>
      <div>
         4
      </div>
      <div>
         5
      </div>
      <div>
         6
      </div>
      <div>
         Item-7
      </div>
      <div>
         8
      </div>
      <div>
         Item-9
      </div>
   </div>

</body>

</html>

Grid Template Rows Property with Length Values

The number and sizes of the rows can be set using length values (e.g. px, em, rem etc.). Depending on the provided values, the number of rows with the specified width will be created. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .container{
         display: grid;
         grid-gap: 10px;
         background-color: lightgray;
         padding: 10px;
         grid-template-columns: auto auto auto;
      }
      .grid-container1 {
         grid-template-rows: 140px 200px 140px;
      }
      .grid-container2{
         grid-template-rows: 10em 7em 10em;
      }
      .container > div {
         border: 3px solid blue;
         color: white;
         background-color: #4d4dff;
         text-align: center;
         padding: 20px;
      }
      .
   </style>
</head>

<body>
   <h2>
      CSS grid-template-rows property
   </h2>
   <h4>
      grid-template-rows: 150px 200px 150px 
      (3 rows are created and sizes are 150px,
      200px and 150px respectively)
   </h4>
   <div class=" container grid-container1">
      <div>
         Item-1
      </div>
      <div>
         Item-2
      </div>
      <div>
         Item-3
      </div>
      <div>
         Item-4
      </div>
      <div>
         Item-5
      </div>
      <div>
         Item-6
      </div>
      <div>
         Item-7
      </div>
      <div>
         Item-8
      </div>
      <div>
         Item-9
      </div>
   </div>
   <h4>
   grid-template-rows: 10em 7em 10em 
   (3 rows are created and sizes are 
   10em, 7em and 10em respectively)
   </h4>
   <div class="container grid-container2">
      <div>
         Item-1
      </div>
      <div>
         Item-2
      </div>
      <div>
         Item-3
      </div>
      <div>
         Item-4
      </div>
      <div>
         Item-5
      </div>
      <div>
         Item-6
      </div>
      <div>
         Item-7
      </div>
      <div>
         Item-8
      </div>
      <div>
         Item-9
      </div>
   </div>

</body>

</html>

Grid Template Rows Property with Percentage Values

The number and sizes of the rows can be set using percentage values (e.g. 10%, 20%.). Depending on the provided values, the number of rows with the specified width will be created. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .grid-container {
         display: grid;
         height: 400px;
         grid-gap: 10px;
         background-color: lightgray;
         padding: 10px;
         grid-template-columns: auto auto auto;
         grid-template-rows: 25% 15% 25%;
      }

      .grid-container>div {
         border: 3px solid blue;
         color: white;
         background-color: #4d4dff;
         text-align: center;
         padding: 20px;
      }
   </style>
</head>

<body>
   <h2>
      CSS grid-template-rows property
   </h2>
   <h4>
      grid-template-rows: 25% 15% 25% 
      (3 rows are created and sizes are 25%,
      15% and 25% of the size of the container's
      width respectively)
   </h4>
   <div class="grid-container">
      <div>
         Item-1
      </div>
      <div>
         Item-2
      </div>
      <div>
         Item-3
      </div>
      <div>
         Item-4
      </div>
      <div>
         Item-5
      </div>
      <div>
         Item-6
      </div>
      <div>
         Item-7
      </div>
      <div>
         Item-8
      </div>
      <div>
         Item-9
      </div>
   </div>
</body>

</html>

Supported Browsers

Property
grid-template-rows	57	16	52	10	44

css_reference.htm

Print Page