グリッドエリアに名前を付けて、視覚的にレイアウトを定義できるプロパティです。
grid-template-areas: "<area-name> <area-name> ..." ....layout {
display: grid;
grid-template-areas:
"header header header"
"sidebar main aside"
"footer footer footer";
}
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }3行3列のグリッドで、上部にヘッダー、左にサイドバー、中央にメイン、右にアサイド、下部にフッターを配置する典型的なWebレイアウト例です。エリア名（header, sidebar, main, aside, footer）がどの位置に割り当てられるかを視覚的に定義できます。
grid-template-areas:
"logo nav nav"
"hero hero hero"
"content content sidebar";1行目は左にロゴ、右2つ分にナビゲーション、2行目はヒーローエリアが3列分、3行目は左2つ分にコンテンツ、右にサイドバーを配置するレイアウト例です。エリア名を使うことで、HTML構造とCSSレイアウトの対応が直感的に分かります。
レイアウトが視覚的に理解しやすい。メディアクエリで簡単に変更可能。
Chrome 57+, Firefox 52+, Safari 10.1+