CSS Grid layout is one of the most powerful layout models for responsive web design that allows to you two dimensional (row and column) web design. 

The grid-container: 

grid container holds the grid element. All the child elements will become grid when we declare grid container display properties are grid or inline-grid. 

index.html

<div class="grid-conainer">
      <div>One</div>
      <div>Two</div>
      <div>Three</div>
      <div>Four</div>
      <div>Five</div>

style.css

.grid-container {
  display: grid;
  grid-template-columns:auto auto auto;
  grid-gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}
.grid-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}

Output


Let's discuss the grid-container property and its value:

1. grid-template-column:auto | px | fr

the grid-template-column defines the width of each column. The value is a space-separated list.

auto:  

If you want your grid layout to contain 3 columns with the same width, specify the width of the 3 columns, or "auto" if all columns should have the same width.

px: 

pixel also define the fixed size width of a column

fr:

 when the browser found a grid item of 1fr, it will allow such item to take all available space(available space are calculated 100%). all 1fr columns will get a 1fr value or the same value but auto take remain available space width and distribute equally. 

2. grid-template-row: 

The grid-template-rows property defines the height of each row. this property value same as grid-template-column.

3. justify-content: center|space-evenly|space-between| space-around| start|end

The justify-content property is used to horizontally align the whole grid inside the container. you have to make sure the grid is smaller than the container width. because it works with parent-child relations.  so it is good practice to use gird-template-column in the pixel unit. 

style.css

.grid-container {
  display: grid;
  grid-template-columns:70px 70px 70px;
  justify-content: end;
  grid-gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}
.grid-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}

4. align-content: center|space-evenly|space-between| space-around| start|end

The align-content property is used to vertically align the whole grid inside the container. you have to make sure the grid is smaller than the container height. so, you should declare grid-container height

.grid-container {
  display: grid;
  grid-template-columns:70px 70px 70px;
  justify-content: end;
  height: 400px;
  align-content: center;
  grid-gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}
.grid-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}

The next part we will discuss later