ヘッダー・サイドバー・メイン・フッターの全体骨格をgrid-template-areasで組む定番構成。エリア名の並びがそのまま画面の設計図になります。
プレビュー枠は右下をドラッグすると高さを変えられます
書き換えるとプレビューに即反映されます。変更はこのページ内だけで、リロードすると元に戻ります。
grid-template-areas は「エリア名を文字で並べた行」がそのまま画面のレイアウト図になるプロパティです。各要素は grid-area でエリア名を名乗るだけで配置され、HTMLの記述順と表示位置が独立します。レスポンシブ対応もメディアクエリ内でareasの文字列を書き換えるだけで、要素の移動が完結します。中央行を1frにすることでメインが余白を吸収します。
エリア名の並びは行ごとに列数を揃える必要があります（揃っていないと定義全体が無効になります）。
grid-template-areasを使った聖杯レイアウト（ヘッダー・左ナビ・メイン・右サイド・フッター）を作ってください。狭い画面ではメディアクエリでareasを書き換えて1カラムに畳んでください。