Grid layouts allow specifying "areas", which consist of single or multiple cells. grid-template-areas attributes are used to define regions.

.container {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 100px 100px;
  grid-template-areas: 'a b c'
                       'd e f'
                       'g h i';
}

The above code has 9 cells, and then names a to i as the nine areas that correspond to the nine cells.

The way to merge multiple cells into one area is as follows.

grid-template-areas: 'a a a'
                     'b b b'
                     'c c c';

The above code creates 9 cells into a, b, c three areas.

Below is an example layout.

grid-template-areas: "header header header"
                     "main main sidebar"
                     "footer footer footer";

In the above code, the top is the header area header, the bottom is the footer area footer, and the middle part is the mainsum sidebar.

If some areas do not need to be exploited, they are represented by "dots" (.).

grid-template-areas: 'a . c'
                     'd . f'
                     'g . i';

In the above code, the middle column is a dot, indicating that the cell is not used, or the cell does not belong to any area.