A Beginner's Guide to Grid Templates in CSS

CSS Grid is a powerful tool for creating complex and responsive layouts on the web. It allows you to create a two-dimensional grid system that you can use to position and size elements on your web page. One of the key features of CSS Grid is the ability to define a grid template.

A grid template is a way to define the structure of the grid. It determines the number of rows and columns in the grid, as well as the size and position of each grid cell. You can define a grid template using the grid-template-rows and grid-template-columns properties, which allow you to specify the size of each row and column in the grid.

For example, if you want to create a grid with three rows and Four columns, you can define the grid template like this:

.container{
  display: grid;
  height: 600px;
  grid-template: repeat(3,1fr) / repeat(4,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.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: repeat(3,1fr);
  grid-template: repeat(3,1fr) / repeat(4,1fr);
}