CSS grid - grid-auto-rows



The CSS property grid-auto-rows defines the dimensions for a grid row track or a set of tracks that are implicitly created.

When a grid item is placed in a row with no specified size via grid-template-rows, the grid system creates implicit grid lanes to accommodate it. This happens when an item is placed in a row outside the defined area or when the automatic placement process creates additional rows.

Possible values

  • <length> - Is a non-negative length.

  • <percentage> - Is a <percentage> value that is non-negative in relation to the grid container's block size. The percentage value is set as auto if the grid container's block size is indefinite.

  • <flex> - This value is a non-negative dimension with the unit fr, which indicates the flex factor of the track. Each track that has a certain size takes up a portion of the remaining space based on its flex factor.

  • max-content - It's a keyword that specifies the maximum content contribution of the grid elements that occupy the grid track.

  • min-content - It's a keyword that specifies the largest minimum content contribution of the grid elements within the grid track.

  • minmax(min, max) - This function defines a size range, from min to max values. If the maximum value is smaller than the minimum value, the maximum value isn't taken into account and the function only uses the minimum value.

  • fit-content( [ <length> | <percentage> ] ) - Represents the expression min(max-content, max(auto, argument)), which is calculated similarly to auto (i.e. minmax(auto, max-content)), but the track size is limited to the argument if it exceeds the auto minimum.

  • auto - The maximum and minimum values in a track indicate the maximum and minimum content sizes (specified by min-width/min-height), respectively, and auto covers the range between them when used alone outside minmax() notation.

Syntax

grid-auto-columns =  <track-size>+  
<track-size> = <track-breadth> minmax(<inflexible-breadth> , <track-breadth>) | fit-content(<length-percentage [0,∞]>)        

Applies to

Grid containers.

CSS grid-auto-rows - <length> Value

The following example demonstrates the usage of grid-auto-rows using length.

<html>
<head>
<style>
   body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 0;
   }
   .grid-container {
      display: grid;
      grid-auto-rows: 50px; /* Change this value to see the effect */
      gap: 15px;
      padding: 20px;
      background-color: #d7dade;
   }
   .item {
      background-color: #054ab0;
      color: white;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24px;
   }
</style>
</head>
<body>
<div class="grid-container">
<div class="item">Box 1</div>
<div class="item">Box 2</div>
<div class="item">Box 3</div>
<div class="item">Box 4</div>
<div class="item">Box 5</div>
<div class="item">Box 6</div>
</div>
</body>
</html>

CSS grid-auto-rows - <percentage> Value

In the following example, the CSS grid-auto-rows: 45%; defines the height of implicitly created rows in the grid, ensuring that each additional row beyond the explicitly defined ones takes up 45% of the available height.

<html>
<head>
<style>
   .custom-grid-container {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-auto-rows: 45%;
      gap: 20px;
      padding: 30px;
      background-color: seagreen;
      border-radius: 10px;
      box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
      margin: 50px;
   }
   .custom-item {
      background-color: #db3c3c;
      color: white;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      border-radius: 8px;
      padding: 15px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
   }
</style>
</head>
<body>
<div class="custom-grid-container">
   <div class="custom-item">Grid Element A</div>
   <div class="custom-item">Grid Element B</div>
   <div class="custom-item">Grid Element C</div>
   <div class="custom-item">Grid Element D</div>
   <div class="custom-item">Grid Element E</div>
   <div class="custom-item">Grid Element F</div>
</div>
</body>
</html>

CSS grid-auto-rows - <flex> Value

The following example demonstrates the usage of grid-auto-rows using flex i.e fr.

<html>
<head>
<style>
   .unique-grid-container {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-auto-rows: 1fr 2fr; 
      gap: 20px;
      padding: 20px;
      background-color: #5E9CA0;
      border-radius: 12px;
      box-shadow: 0 0 18px rgba(0, 0, 0, 0.2);
      margin: 50px;
   }
   .unique-item {
      background-color: #FFD700;
      color: #333;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      border-radius: 10px;
      padding: 20px;
      box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
   }
</style>
</head>
<body>
<div class="unique-grid-container">
   <div class="unique-item">Special Box X</div>
   <div class="unique-item">Special Box Y</div>
   <div class="unique-item">Special Box Z</div>
   <div class="unique-item">Special Box W</div>
   <div class="unique-item">Special Box V</div>
   <div class="unique-item">Special Box U</div>
</div>
</body>
</html>

CSS grid-auto-rows - max-content Value

The following example demonstrates the usage of grid-auto-rows using max-content.

<html>
<head>
<style>
   .customized-grid-container {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-auto-rows: max-content; 
      gap: 25px;
      padding: 15px;
      background-color: #c90e27;
      border-radius: 5px;
      box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
      margin: 40px;
   }
   .customized-item {
      background-color: #FFA07A;
      color: #333;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      border-radius: 8px;
      padding: 15px;
      box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
   }
</style>
</head>
<body>
<div class="customized-grid-container">
   <div class="customized-item">Special BLOCK A with Larger- Content</div>
   <div class="customized-item">BLOCK B</div>
   <div class="customized-item">BLOCK C</div>
   <div class="customized-item">Special BLOCK D with Longer Content</div>
   <div class="customized-item">BLOCK E</div>
   <div class="customized-item">BLOCK F</div>
</div>
</body>
</html>

CSS grid-auto-rows - min-content Value

The following example demonstrates the usage of grid-auto-rows using min-content.

<html>
<head>
<style>
   .customized-grid-container {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-auto-rows: min-content; 
      gap: 25px;
      padding: 15px;
      background-color: #f0582e;
      border-radius: 10px;
      box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
      margin: 40px;
   }
   .customized-item {
      background-color: #e0b4ba;
      color: #333;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      border-radius: 10px;
      padding: 10px;
      box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
   }
</style>
</head>
<body>
<div class="customized-grid-container">
   <div class="customized-item">Block A</div>
   <div class="customized-item">Block B</div>
   <div class="customized-item">Block C</div>
   <div class="customized-item">Block D</div>
   <div class="customized-item">Block E</div>
   <div class="customized-item">Block F</div>
</div>
</body>
</html>

CSS grid-auto-rows - fit-content Value

The following example demonstrates the usage of grid-auto-rows using fit-content.

<html>
<head>
<style>
   .customized-grid-container {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-auto-rows: fit-content(100px); 
      gap: 25px;
      padding: 15px;
      background-color: #6495ED;
      border-radius: 15px;
      box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
      margin: 40px;
   }
   .customized-item {
      background-color: #FFD700;
      color: #333;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 16px;
      border-radius: 12px;
      padding: 15px;
      box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
   }
</style>
</head>
<body>
<div class="customized-grid-container">
   <div class="customized-item">Flexible Block A</div>
   <div class="customized-item">Flexible Block B</div>
   <div class="customized-item">Flexible Block C</div>
   <div class="customized-item">Flexible Block D with Longer Content</div>
   <div class="customized-item">Flexible Block E with Longer Content</div>
   <div class="customized-item">Flexible Block F with Longer Content</div>
</div>
</body>
</html>

CSS grid-auto-rows - minmax(min, max) Value

The following example demonstrates the usage of grid-auto-rows using minmax(min, max).

<html>
<head>
<style>
   .customized-grid-container {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-auto-rows: minmax(80px, 1fr);
      gap: 25px;
      padding: 15px;
      background-color: #FF6347;
      border-radius: 15px;
      box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
      margin: 40px;
   }
   .customized-item {
      background-color: #87CEEB;
      color: #333;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 16px;
      border-radius: 12px;
      padding: 15px;
      box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
   }
</style>
</head>
<body>
<div class="customized-grid-container">
   <div class="customized-item">Resizable Block A</div>
   <div class="customized-item">Resizable Block B</div>
   <div class="customized-item">Resizable Block C</div>
   <div class="customized-item">Resizable Block D with Longer Content</div>
   <div class="customized-item">Resizable Block E with Longer Content</div>
   <div class="customized-item">Resizable Block F with Longer Content</div>
</div>
</body>
</html>

CSS grid-auto-rows - auto Value

In the following example the CSS grid-auto-rows: auto; indicates that the height of the implicitly formed rows in the grid will depend on the intrinsic size of the content, thus every row will dynamically resize to fit the content inside the custom grid container.

<html>
<head>
<style>
   body {
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      margin: 0;
      padding: 0;
      background-color: #f0f0f0;
   }
   .custom-grid-container {
      display: grid;
      grid-auto-rows: auto;
      gap: 20px;
      padding: 30px;
      background-color: #6a6a6a;
      border-radius: 10px;
      box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
      margin: 50px;
   }
   .custom-item {
      background-color: #db3c3c;
      color: white;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      border-radius: 8px;
      padding: 15px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
   }
</style>
</head>
<body>
<div class="custom-grid-container">
   <div class="custom-item">BOX 1</div>
   <div class="custom-item">BOX 2</div>
   <div class="custom-item">BOX 3</div>
   <div class="custom-item">BOX 4</div>
   <div class="custom-item">BOX 5</div>
   <div class="custom-item">BOX 6</div>
</div>
</body>
</html>
Advertisements