grid-template-areas を使うと「レイアウトの設計図」をそのまま CSS に書ける
Grid の中でも grid-template-areas は、複雑なレイアウトを“文字で描く”ように定義できる強力な仕組みです。
ヘッダー・サイドバー・メイン・フッターなどの ページ全体レイアウト を作るときに特に威力を発揮します。
Flexbox では難しい「縦横をまたぐ配置」も、Grid なら一瞬で実現できます。
grid-template-areas の基本構造
レイアウトを「文字のマップ」で表現する
grid-template-areas:
"header header"
"sidebar main"
"footer footer";
このように、どのセルにどのエリアを置くかを文字で表現します。
各要素に area 名を割り当てる
header { grid-area: header; }
aside { grid-area: sidebar; }
main { grid-area: main; }
footer { grid-area: footer; }
Tailwind CSS では任意値で書く
Tailwind は grid-template-areas の専用ユーティリティがないため、
任意値（arbitrary values） を使います。
<div class="grid grid-rows-[auto_1fr_auto] grid-cols-[200px_1fr]
[grid-template-areas:'header_header''sidebar_main''footer_footer']">
エリア名は 'header_header' のように、スペースを _ に置き換えて書きます。
例1：最も基本的な「ヘッダー・サイドバー・メイン・フッター」
CSS版
.layout {
display: grid;
grid-template-columns: 200px 1fr;
grid-template-rows: auto 1fr auto;
grid-template-areas:
"header header"
"sidebar main"
"footer footer";
gap: 16px;
}
header { grid-area: header; }
aside { grid-area: sidebar; }
main { grid-area: main; }
footer { grid-area: footer; }
<div class="layout">
<header>ヘッダー</header>
<aside>サイドバー</aside>
<main>メイン</main>
<footer>フッター</footer>
</div>
Tailwind版
<div class="
grid gap-4
grid-cols-[200px_1fr]
grid-rows-[auto_1fr_auto]
[grid-template-areas:'header_header''sidebar_main''footer_footer']
">
<header class="[grid-area:header] bg-gray-200 p-4 rounded">ヘッダー</header>
<aside class="[grid-area:sidebar] bg-gray-100 p-4 rounded">サイドバー</aside>
<main class="[grid-area:main] bg-white p-4 rounded shadow">メイン</main>
<footer class="[grid-area:footer] bg-gray-200 p-4 rounded">フッター</footer>
</div>
深掘りポイント
この書き方の最大のメリットは、
「レイアウトの構造が CSS を見ただけで理解できる」ことです。
HTML の順番を変えずに、視覚的な配置だけ変えることもできます。
例2：3カラムのうち、メインだけ縦に長くする
CSS版
.grid {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
grid-template-rows: auto 1fr;
grid-template-areas:
"left main right"
"left main right";
gap: 20px;
}
.left { grid-area: left; }
.main { grid-area: main; }
.right { grid-area: right; }
Tailwind版
<div class="
grid gap-5
grid-cols-[1fr_2fr_1fr]
grid-rows-[auto_1fr]
[grid-template-areas:'left_main_right''left_main_right']
">
<div class="[grid-area:left] bg-gray-100 p-4 rounded">左</div>
<div class="[grid-area:main] bg-white p-4 rounded shadow">メイン</div>
<div class="[grid-area:right] bg-gray-100 p-4 rounded">右</div>
</div>
ポイント
同じエリア名を複数行に書くことで、
メインが縦に長く“2行分”を占有します。
例3：スマホでは1カラム、PCでは複雑なレイアウトに変化
Tailwind版（レスポンシブ）
<div class="
grid gap-4
grid-cols-1
[grid-template-areas:'header''main''sidebar''footer']
md:grid-cols-[200px_1fr]
md:grid-rows-[auto_1fr_auto]
md:[grid-template-areas:'header_header''sidebar_main''footer_footer']
">
<header class="[grid-area:header] bg-gray-200 p-4 rounded">ヘッダー</header>
<main class="[grid-area:main] bg-white p-4 rounded shadow">メイン</main>
<aside class="[grid-area:sidebar] bg-gray-100 p-4 rounded">サイドバー</aside>
<footer class="[grid-area:footer] bg-gray-200 p-4 rounded">フッター</footer>
</div>
スマホ：
header
main
sidebar
footer
PC：
header header
sidebar main
footer footer
深掘りポイント
grid-template-areas はレスポンシブと相性が抜群で、
ブレークポイントごとに「レイアウトの設計図」を書き換えるだけで
全く違うレイアウトに変えられます。
grid-template-areas の戦略的な使いどころ
1. ページ全体のレイアウトを作るときに最強
ヘッダー・サイドバー・メイン・フッターなど、
複数の領域を持つレイアウトは Grid が圧倒的に楽です。
2. HTML の順番を変えずに視覚的な配置だけ変えられる
SEO やアクセシビリティのために
HTML の順番は変えたくないけれど、
見た目の配置は変えたいときに便利です。
3. 複雑なレイアウトを「文字で描く」ので理解しやすい
"header header"
"sidebar main"
"footer footer"
このように、レイアウトが視覚的に理解できます。
4. Flexbox では難しい「縦横またぎ」が簡単
Flexbox は1方向の並びに強いですが、
Grid は縦横の両方向を同時に扱えるため、
複雑なレイアウトに向いています。
実践テンプレート：ブログ記事ページのレイアウト
<div class="
grid gap-6
grid-cols-[1fr_300px]
grid-rows-[auto_1fr_auto]
[grid-template-areas:'header_header''content_sidebar''footer_footer']
">
<header class="[grid-area:header] bg-gray-200 p-4 rounded">ヘッダー</header>
<article class="[grid-area:content] bg-white p-6 rounded shadow">記事本文</article>
<aside class="[grid-area:sidebar] bg-gray-100 p-4 rounded">サイドバー</aside>
<footer class="[grid-area:footer] bg-gray-200 p-4 rounded">フッター</footer>
</div>
まとめ
grid-template-areas は、Grid の中でも特に強力なレイアウト手法です。
- レイアウトを「文字のマップ」で表現できる
- HTML の順番を変えずに配置を変えられる
- 複雑なレイアウトが直感的に書ける
- レスポンシブ対応が簡単
- Tailwind では任意値で柔軟に書ける
