Что такое `grid-area` и `grid-template-areas`?

• grid-template-areas — визуальное определение layout через ASCII-art
• grid-area — привязка элемента к именованной области
• . — пустая ячейка, каждая строка в кавычках

grid-template-areas:
  "header header"
  "sidebar main"
  "footer footer";
.header { grid-area: header; }