グリッドエリアに名前を付けて、視覚的にレイアウトを定義できるプロパティです。文字列でエリア名を並べることで、直感的で保守性の高いグリッドレイアウトを実現できます。
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レイアウトの対応が直感的に分かります。
レイアウトが視覚的に理解しやすい。メディアクエリで簡単に変更可能。
AIはgrid-template-areasの制約（各行の列数が全行で一致、同名エリアは矩形のみ）を破った無効テンプレートを生成することがあります。1つでも規則違反があるとテンプレート全体が無効になり黙って崩れるので、行の列数と矩形性を必ず確認してください。空セルはピリオド（.）です。
ヘッダー・サイドバー・メイン・フッターのレイアウトをgrid-template-areasで視覚的に定義して、スマホでは並び替えて
そのままAIチャットに貼り付けて使える依頼文の例です。ページ上部の「AI用にコピー」でこのページ全体をコンテキストとして渡せます。