How grid areas can be defined?

The grid-template-areas CSS property specifies named grid areas, establishing the cells in the grid and assigning them names.

/* Keyword value */
grid-template-areas: none;

/* <string> values */
grid-template-areas: "a b";
grid-template-areas: "a b b"
                     "a c d";

/* Global values */
grid-template-areas: inherit;
grid-template-areas: initial;
grid-template-areas: unset;

Source: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-areas

‼️

Using a dot (or several ones) in a cell means that nothing is going to be assigned to that cell.