We will learn by making the below layout.

5 Mins

Grid is the layout structured by row x column.

We specify how many row and column by setting

1. grid-column-template
2. grid-row-template

Grid layout is set at the parent (just like flex).

One equal cell is specify by 1fr.

.parent {
  display: grid;
  grid-column-template: 1fr 1fr;
  grid-row-template: 1fr 1fr;
}

For 2x2 grid, the counting work like this:

  1  2  3 <-- column 1,2,3
1 ------- <-- row 1
  |  |  |
2 ------- <-- row 2
  |  |  |
3 ------- <-- row 3

Then we specify the grid start and end by setting the properties grid-column and grid-row.

.red {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
}
.green {
  grid-column: 2 / 3;
  grid-row: 1 / 3;
}
.blue {
  grid-column: 1 / 2;
  grid-row: 2 / 3;
}

10 mins

The above example need a lot of mental energy.

Here we need ‘Alias’ where easy for our brain.

This is achievable with grid-area.
Grid assume equal cell then we will omit the 1fr part.

.parent {
  display: grid;
  grid-template-areas: 
      "upper-left right"
      "lower-left right";
}
.red {
  grid-area: upper-left;
}
.green {
  grid-area: right;
}
.blue {
  grid-area: lower-left;
}

Isn’t it easier? Yep.

If you have more time

You can learn the rest of the properties to adjust stuff inside grid

e.g. justify-content , align-content , …

but you if don’t have time.

You can anyway achieve that properties with other familiar tool like padding, margin, flex etc.

Hope this help !