グリッドで区切られた領域に名前をつけます。下記の例では、header, menu, main, footer という名前の領域を定義しています。領域名は grid-area などから参照できます。詳細は「とほほのGrid入門」を参照してください。

.grid-container {
  display: grid;
  grid-template-areas: "header header"
                       "menu main"
                       "footer footer";
  grid-template-rows: 1.5rem auto 1.5rem;
  grid-template-columns: 6rem auto;
}
.header { grid-area: header; }
.menu { grid-area: menu; }
.main { grid-area: main; }
.footer { grid-area: footer; }

• grid
• grid-template
• grid-template-rows
• grid-template-columns
• grid-auto-flow
• grid-auto-rows
• grid-auto-columns
• grid-area
• grid-row
• grid-column
• grid-row-start
• grid-row-end
• grid-column-start
• grid-column-end

• https://developer.mozilla.org/ja/docs/Web/CSS/grid-template-areas
• https://drafts.csswg.org/css-grid/#grid-template-areas-property