CSS grid-template-rows

The CSS grid-template-rows property is used to define the height of a/multiple row(s) in grid layout. For example:

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      .container {display: grid; gap: 2px; grid-template-columns: auto auto auto;
            grid-template-rows: 80px 140px;}
      .container > div {border: 2px solid chocolate; padding: 12px; text-align: center;}
   </style>
</head>
<body>

   <div class="container">
      <div>A</div>
      <div>B</div>
      <div>C</div>
      <div>D</div>
      <div>E</div>
      <div>F</div>
   </div>
   
</body>
</html>

Output

Note - The grid as the value of display property, is used to make an element as a block level grid container.

Note - The gap property is used to define the gap between rows and columns in grid layout.

Note - The grid-template-columns is used to define the number of columns to create in grid layout.

CSS grid-template-rows Syntax

The syntax of grid-template-rows property in CSS, is:

grid-template-rows: rowOneSize rowTwoSize rowThreeSize ... rowNSize;

The value of rowSize should be defined using any of the following:

auto - used to automatically determine the size of row based on the content
length - used to define the custom sized rows. For example: 120px
max-content - used to define the row size based on the largest row item
min-content - used to define the row size based on the smallest row item
none - This is the default value

CSS grid-template-rows Example

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      .container {display: grid; gap: 2px; grid-template-columns: auto auto auto;
            grid-template-rows: auto auto;}
      .container > div {border: 2px solid chocolate; padding: 12px; text-align: center;}
   </style>
</head>
<body>

   <div class="container">
      <div>
         <h2>The grid-template-rows Property with auto</h2>
         <p>This is an example of grid-template-rows property with auto as value</p>
      </div>
      <div>B</div>
      <div>C</div>
      <div>D</div>
      <div>E</div>
      <div>F</div>
   </div>
   
</body>
</html>

Output

The grid-template-rows Property with auto

This is an example of grid-template-rows property with auto as value

CSS Online Test

« Previous Tutorial Next Tutorial »