CSS - grid-auto-rows Property

Quiz

CSS grid-auto-rows property 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. The property does not have any effect if grid-template-rows is used.

Syntax

grid-auto-rows: auto | length | percentage | max-content | min-content | minmax(min, max)| fit-content();

Property Values

Value	Description
auto	The size of the rows depends on the size of the container. Default.
length	The size of the row is set using length units.
percentage	The size of the row is set using percentage values.
max-content	The size of the row depends on the length of the content. Wrapping do not occur.
min-content	The size of the row depends on the length of the content. Wrapping occurs.
minmax(min, max)	It specifies the minimum default row size and the maximum attainable row size.
fit-content()	It specifies a size within which the content is to be shown. Wrapping can occur.

Examples of CSS Grid Auto Rows Property

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

Grid Auto Rows Property with Auto Value

To allow the grid item to size itself based on its content and the available space in the grid container, we use the auto value. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

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

      .grid-item {
         background-color: #336699;
         border: 3px solid blue;
         padding: 10px;
         text-align: center;
         color: white;
      }

      .item1 {
         grid-area: 1 / 1 / 2 / 2;
      }

      .item2 {
         grid-area: 1 / 2 / 2 / 3;
      }

      .item3 {
         grid-area: 1 / 3 / 2 / 4;
      }

      .item4 {
         grid-area: 2 / 1 / 3 / 2;
      }

      .item5 {
         grid-area: 2 / 2 / 3 / 3;
      }
   </style>
</head>

<body>
   <h2>
      CSS grid-auto-rows property
   </h2>
   <h4>
      grid-auto-rows: auto
   </h4>
   <div class="grid-container">
      <div class="grid-item item1">
         Item-1
      </div>
      <div class="grid-item item2">
         Item-2
      </div>
      <div class="grid-item item3">
         Item-3
      </div>
      <div class="grid-item item4">
         Item-4
      </div>
      <div class="grid-item item5">
         Item-5
      </div>

   </div>
</body>

</html>

Grid Auto Rows Property with Length Values

To set the size of implicit rows, we can specify the size in length units (e.g. 10px, 20em etc.). All the implicitely created rows will thus be having the specified size. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

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

      .grid-item {
         background-color: #336699;
         border: 3px solid blue;
         padding: 10px;
         text-align: center;
         color: white;
      }

      .item1 {
         grid-area: 1 / 1 / 2 / 2;
      }

      .item2 {
         grid-area: 1 / 2 / 2 / 3;
      }

      .item3 {
         grid-area: 1 / 3 / 2 / 4;
      }

      .item4 {
         grid-area: 2 / 1 / 3 / 2;
      }

      .item5 {
         grid-area: 2 / 2 / 3 / 3;
      }
   </style>
</head>

<body>
   <h2>
      CSS grid-auto-rows property
   </h2>
   <h4>
      grid-auto-rows: 140px (each 
      row is 140px high)
   </h4>
   <div class="grid-container">
      <div class="grid-item item1">
         Item-1
      </div>
      <div class="grid-item item2">
         Item-2
      </div>
      <div class="grid-item item3">
         Item-3
      </div>
      <div class="grid-item item4">
         Item-4
      </div>
      <div class="grid-item item5">
         Item-5
      </div>

   </div>
</body>

</html>

Grid Auto Rows Property with Percentage Values

To set the size of implicit rows, we can specify the size in percentage values (e.g. 10%, 20% etc.) which assign size as percent of the size of the container. All the implicitely created rows will thus be having the specified size. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .grid-container {
         height: 300px;
         background-color: lightgray;
         padding: 10px;
         display: grid;
         grid-auto-rows: 40%;
         gap: 10px;
      }

      .grid-item {
         background-color: #336699;
         border: 3px solid blue;
         padding: 10px;
         text-align: center;
         color: white;
      }

      .item1 {
         grid-area: 1 / 1 / 2 / 2;
      }

      .item2 {
         grid-area: 1 / 2 / 2 / 3;
      }

      .item3 {
         grid-area: 1 / 3 / 2 / 4;
      }

      .item4 {
         grid-area: 2 / 1 / 3 / 2;
      }

      .item5 {
         grid-area: 2 / 2 / 3 / 3;
      }
   </style>
</head>

<body>
   <h2>
      CSS grid-auto-rows property
   </h2>
   <h4>
      grid-auto-rows: 40% (each row has 
      40% of the container's height)
   </h4>
   <div class="grid-container">
      <div class="grid-item item1">
         Item-1
      </div>
      <div class="grid-item item2">
         Item-2
      </div>
      <div class="grid-item item3">
         Item-3
      </div>
      <div class="grid-item item4">
         Item-4
      </div>
      <div class="grid-item item5">
         Item-5
      </div>

   </div>
</body>

</html>

Grid Auto Rows Property with Max Content Value

To set the height of the row to be as tall as the maximum content it contains, we use the max-content value. This means the row will expand to fit its largest content item without any truncation or overflow. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

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

      .grid-item {
         background-color: #336699;
         border: 3px solid blue;
         padding: 10px;
         text-align: center;
         color: white;
      }

      .item1 {
         grid-area: 1 / 1 / 2 / 2;
      }

      .item2 {
         grid-area: 1 / 2 / 2 / 3;
      }

      .item3 {
         grid-area: 1 / 3 / 2 / 4;
      }

      .item4 {
         grid-area: 2 / 1 / 3 / 2;
      }

      .item5 {
         grid-area: 2 / 2 / 3 / 3;
      }
   </style>
</head>

<body>
   <h2>
      CSS grid-auto-rows property
   </h2>
   <h4>
      grid-auto-rows: max-content (the height of the 
      items in each row is determined by the longest
      sentence height in the row)
   </h4>
   <div class="grid-container">
      <div class="grid-item item1">
         This is the first Item
      </div>
      <div class="grid-item item2">
         This is the second box in the grid layout
         and is being made longer to demonstrate the effect.
      </div>
      <div class="grid-item item3">
         This is third box in the layout.
      </div>
      <div class="grid-item item4">
         This is fourth box in the layout.
      </div>
      <div class="grid-item item5">
         This is the fifth box in the grid layout.
      </div>

   </div>
</body>

</html>

Grid Auto Rows Property with Min Content Value

To set the row height to the minimum size needed to fit the content without overflowing, we use the min-content value. The row will be as short as possible while still ensuring that the content is fully visible and not cut off. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

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

      .grid-item {
         background-color: #336699;
         border: 3px solid blue;
         padding: 10px;
         text-align: center;
         color: white;
      }

      .item1 {
         grid-area: 1 / 1 / 2 / 2;
      }

      .item2 {
         grid-area: 1 / 2 / 2 / 3;
      }

      .item3 {
         grid-area: 1 / 3 / 2 / 4;
      }

      .item4 {
         grid-area: 2 / 1 / 3 / 2;
      }

      .item5 {
         grid-area: 2 / 2 / 3 / 3;
      }
   </style>
</head>

<body>
   <h2>
      CSS grid-auto-rows Property
   </h2>
   <h4>
      grid-auto-rows: min-content (The rows will be sized
      to fit the minimum height required by their content.)
   </h4>
   <div class="grid-container">
      <div class="grid-item item1">
         This is first item.
      </div>
      <div class="grid-item item2">
         This is Second item.
      </div>
      <div class="grid-item item3">
         This is third item 
      </div>
      <div class="grid-item item4">
         This is fourth
      </div>
      <div class="grid-item item5">
         This is fifth
      </div>
   </div>
</body>

</html>

Grid Auto Rows Property with MinMax Function

To define a size range for the grid items, we use the minmax() function to specify the default minimum size of the item and the maximum attainable size of the item (e.g. minmax(50px,100px) indicates the initial size is 50px but the element can grow upto 100px). This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .grid-container {
         background-color: lightgray;
         padding: 10px;
         display: grid;
         grid-auto-rows: minmax(40px, 87px);
         gap: 10px;
      }

      .grid-item {
         background-color: #336699;
         border: 3px solid blue;
         padding: 10px;
         text-align: center;
         color: white;
      }

      .item1 {
         grid-area: 1 / 1 / 2 / 2;
      }

      .item2 {
         grid-area: 1 / 2 / 2 / 3;
      }

      .item3 {
         grid-area: 1 / 3 / 2 / 4;
      }

      .item4 {
         grid-area: 2 / 1 / 3 / 2;
      }

      .item5 {
         grid-area: 2 / 2 / 3 / 3;
      }
   </style>
</head>

<body>
   <h2>
      CSS grid-auto-rows property
   </h2>
   <h4>
      grid-auto-rows: minmax(40px, 87px) (the initial 
      height of the items is 40px and maximum 
      attainable height is 87px)
   </h4>
   <div class="grid-container">
      <div class="grid-item item1">
         This is the first Item1
      </div>
      <div class="grid-item item2">
         This is the second box in the grid layout and
         is being made longer to demonstrate the effect.
      </div>
      <div class="grid-item item3">
         This is third box in the layout.
      </div>
      <div class="grid-item item4">
         This is fourth box in the layout.
      </div>
      <div class="grid-item item5">
         This is the fifth box in the grid layout.
      </div>

   </div>
</body>

</html>

Grid Auto Rows Property with Fit Content Function

To set a row height that fits its content but within a specified maximum size (e.g. fit-content(200px) means the row will be as tall as needed to fit the content but will not exceed 200 pixels). This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .grid-container {
         background-color: lightgray;
         padding: 10px;
         display: grid;
         grid-auto-rows: fit-content(50px);
         gap: 10px;
      }

      .grid-item {
         background-color: #336699;
         border: 3px solid blue;
         padding: 10px;
         text-align: center;
         color: white;
      }

      .item1 {
         grid-area: 1 / 1 / 2 / 2;
      }

      .item2 {
         grid-area: 1 / 2 / 2 / 3;
      }

      .item3 {
         grid-area: 1 / 3 / 2 / 4;
      }

      .item4 {
         grid-area: 2 / 1 / 3 / 2;
      }

      .item5 {
         grid-area: 2 / 2 / 3 / 3;
      }
   </style>
</head>

<body>
   <h2>
      CSS grid-auto-rows Property
   </h2>
   <h4>
      grid-auto-rows: fit-content (The rows will
      have a maximum height of 50px)
   </h4>
   <div class="grid-container">
      <div class="grid-item item1">
         This is first item.
      </div>
      <div class="grid-item item2">
         This is Second item .
      </div>
      <div class="grid-item item3">
         This is third item 
      </div>
      <div class="grid-item item4">
         This is fourth
      </div>
      <div class="grid-item item5">
         This is fifth
      </div>
   </div>
</body>

</html>

Supported Browsers

Property
grid-auto-rows	57	16	52	10	44

css_reference.htm

Print Page