レイアウト・構造
ホーリーグレイル
ヘッダー／（左ナビ・メイン・右アサイド）／フッターの3段5領域を、CSS Grid の grid-template-areas で組む古典的な万能レイアウト。
プレビュー
静的
操作動きのない質感・レイアウトの見本です。
実装メモ
grid-template-areas に領域名を書くだけで、DOM順に依存せず配置できます。狭幅では areas を1列（header/nav/main/aside/footer の縦積み）へ組み替えるのが定石です。
コード（コピーして使えます）
<div class="stage">
<div class="hg">
<header class="hg-header">Header</header>
<nav class="hg-nav" aria-label="サイドナビ">Nav</nav>
<main class="hg-main">Main</main>
<aside class="hg-aside">Aside</aside>
<footer class="hg-footer">Footer</footer>
</div>
</div>