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.