The grid-template-areas property makes it possible to insert the grid items in specific areas:
You use the grid-template-areas property to place the elements in relation to one another by calling them by a grid-area name. To make this work, you then give each grid item a name.
In the example above, we create a grid with two columns. We then say that both the first two grid columns have to be filled with the grid item with the grid-area: a. On the next row, we fill in the first column with the grid item with grid-area: b, and the second with the one with grid-area: c. In the last row, both columns are filled with the grid item with grid-area: d.
If you want to leave some spaces empty, you fill in with a . (dot):