Understanding Grid Template Rows in CSS

Grid Template Rows is a property in CSS Grid that defines the number and size of rows in a grid container. It allows you to specify the height of each row and their position within the grid. You can use it in conjunction with Grid Template Columns to create complex layouts in CSS Grid.

The Grid Template Rows property is declared using the "grid-template-rows" property. It can accept a variety of values, including fixed lengths (such as pixels or ems), percentages, and the "fr" unit, which is used for specifying a flexible fraction of the remaining space.

Once you have a grid container, you can start defining the grid itself using a combination of Grid Template Rows and Grid Template Columns. Grid Template Columns allows you to define the size and position of columns within the grid, while Grid Template Rows allows you to define the size and position of rows.

The Grid Template Columns property takes a list of values that define the size and position of each column within the grid. These values are separated by spaces or slashes, and can be defined using various CSS units, such as pixels, ems, or percentages.

Overall, Grid Template Columns is a powerful tool for creating custom layouts in CSS. It allows you to define the size, position, and alignment of columns within a grid, and provides a lot of flexibility when it comes to creating responsive designs.

For example,

Method 1 : if you want to create a grid with three rows, where the all rows is 100 pixels tall, you can use the following code:

.container{
  display: grid;
  height: 600px;
  grid-template-columns: repeat(3,1fr);
  grid-template-rows: 100px;
}

Method 2 : if you want to create a grid with three rows, where the first row is 100 pixels tall, the second row is 150 pixels of the remaining space, and the third row is 200 pixels tall, you can use the following code:

.container{
  display: grid;
  height: 600px;
  grid-template-columns: repeat(3,1fr);
  grid-template-rows: 100px 150px 200px;
}

Method 3 : repeat function

The "repeat" function is a useful feature in CSS Grid that allows you to repeat a pattern of values when defining the size and position of columns or rows. This function can be used with the "grid-template-columns" and "grid-template-rows" properties to quickly create grids with repeated patterns of columns or rows.

The "repeat" function takes two arguments: the first argument specifies the number of times to repeat the pattern, and the second argument specifies the pattern itself. The pattern can be any combination of values that are valid for the "grid-template-columns" or "grid-template-rows" properties, such as fixed pixel values or flexible fractions using the "fr" unit.

If you want to create a 3-rows grid with rows of equal Height. Instead of writing out "100px 100px 100px",you can use the "repeat" function like this:

.container{
  display: grid;
  height: 600px;
  grid-template-columns: repeat(3,1fr);
  grid-template-rows: repeat(3,100px);
}

Method 4 If you want to create a 3-rows grid with rows of equal Height. Instead of writing out "1fr 1fr 1fr",you can use the "repeat" function like this

.container{
  display: grid;
  height: 600px;
  grid-template-columns: repeat(3,1fr);
  grid-template-rows: repeat(3,1fr);
}

Source Code :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="grid-template-rows.css">
</head>
<body>
  <div class="container">
    <div class="grid-item box-1">Box-1</div>
    <div class="grid-item box-2">Box-2</div>
    <div class="grid-item box-3">Box-3</div>
    <div class="grid-item box-4">Box-4</div>
    <div class="grid-item box-5">Box-5</div>
    <div class="grid-item box-6">Box-6</div>
    <div class="grid-item box-7">Box-7</div>
    <div class="grid-item box-8">Box-8</div>
    <div class="grid-item box-9">Box-9</div>
  </div>
</body>
</html>

style.css :

@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;500;600;700;900&display=swap');

*{
  margin: 0;
  padding: 0;
  font-family: 'Rubik', sans-serif;
  box-sizing: border-box;
}

.container{
  border:5px solid black;
  margin: 20px;
}

.grid-item{
  color:white;
  font-size: 18px;
  padding: 16px;
  text-align: center;
}

.box-1{background-color: #1abc9c;}
.box-2{background-color:#3498db;}
.box-3{background-color: #2ecc71;}
.box-4{background-color: #9b59b6;}
.box-5{background-color:#34495e;}
.box-6{background-color:#2980b9;}
.box-7{background-color:#e74c3c;}
.box-8{background-color: #d35400;}
.box-9{background-color:#2c3e50;}

/**-----------------------------------------------*/

.container{
  display: grid;
  height: 600px;
  grid-template-columns: repeat(3,1fr);
  grid-template-rows: 100px;
  grid-template-rows: 100px 150px 200px ;
  grid-template-rows: repeat(3,100px);
  grid-template-rows: repeat(3,1fr);
}

Live Preview

Grid Template Rows is a powerful feature in CSS Grid that allows you to specify the number and size of rows in a grid container, and their position within the grid. It provides a lot of flexibility for creating complex layouts, and can be used in conjunction with other CSS Grid properties to create responsive and dynamic designs.