Advanced Grid: What is grid-template-areas?

It allows defining a grid layout using named areas in a visual matrix string.

By mapping out an ASCII-like grid in the parent container, and assigning grid-area: name to children, responsive layout changes become trivial. You simply rewrite the string for different media queries without touching row/column definitions.