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;

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