CSS · Layout

CSS grid-template-areas 実践ガイド ―
名前で組む、直感的なレイアウト設計

レイアウトの「見取り図」をそのままCSSで書けたら——そのアイデアが grid-template-areas です。ヘッダー、サイドバー、メイン、フッターを「名前」で配置する直感的な手法を、実例とライブデモで徹底解説します。

✍
NAOYA
2026.04.07 読了目安：8分

「どのセルがどこに対応するのか」問題

CSS Gridを使い始めたとき、最初の壁は grid-column: 1 / 3 や grid-row: 2 / 4 のような数値指定ではないでしょうか。コードを書いた本人でも、1週間後に見返すと「えっ、これどのセルだっけ」となる。

そこに登場するのが grid-template-areas です。レイアウトの「地図」を文字列で書いて、各要素に名前を割り当てる——。数値ではなく言葉でグリッドを設計するこの手法は、可読性と保守性を一気に引き上げてくれます。

実は、この書き方を知っているかどうかで、Gridを「なんとなく使える」から「設計ツールとして使える」に変わると思っています。

📌 ポイント
grid-template-areas は 見た目通りにレイアウトを書く ための仕組みです。コードを読んだだけで画面の構成がわかる、いわば「ASCII art設計図」です。

基本の書き方 ― まず動かしてみる

まずは最小構成を見てください。親要素に grid-template-areas でレイアウトの地図を定義し、子要素に grid-area で名前を割り当てるだけです。

HTML
<div class="layout">
  <header class="l-header">Header</header>
  <nav class="l-sidebar">Sidebar</nav>
  <main class="l-main">Main</main>
  <footer class="l-footer">Footer</footer>
</div>
CSS
.layout {
  display: grid;
  grid-template-columns: 200px 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header  header"
    "sidebar main"
    "footer  footer";
  min-height: 100vh;
  gap: 12px;
}

.l-header  { grid-area: header; }
.l-sidebar { grid-area: sidebar; }
.l-main    { grid-area: main; }
.l-footer  { grid-area: footer; }

注目してほしいのは grid-template-areas の部分です。文字列の並びが、そのままレイアウトの見取り図になっています。"header header" は「headerがその行の2列すべてを占有する」という意味。まるで方眼紙に名前を書いているようですよね。

▶ Live Demo — 基本レイアウト
header
sidebar
main
footer

実践パターン ― 現場でよく使う構成3選

① レスポンシブで「地図」を書き換える

grid-template-areas の最大の強みはメディアクエリとの相性のよさです。モバイルでは縦積み、PCでは2カラム——この切り替えが、数値なしで直感的に書けます。

レスポンシブ切り替え
.layout {
  display: grid;
  gap: 16px;

  /* モバイル：縦積み */
  grid-template-columns: 1fr;
  grid-template-areas:
    "header"
    "main"
    "sidebar"
    "footer";
}

@media (min-width: 768px) {
  .layout {
    grid-template-columns: 1fr 280px;
    grid-template-areas:
      "header  header"
      "main    sidebar"
      "footer  footer";
  }
}

子要素には一切触れずに、親の「地図」を書き換えるだけ。モバイルではサイドバーをメインの下に移動し、PCでは右に配置する——こうした変更が、子要素のCSS変更なしに実現できるのは、数値指定では難しいことです。

② 空白セルを .（ドット）で表現する

セルを意図的に空けたいときは . を使います。例えば、ヘッダーのあとに何もない空きスペースを入れる場合。

ドットで空白セルを表現
grid-template-areas:
  "header header header"
  ".      main   sidebar"  /* 左端は空白 */
  "footer footer footer";

③ NG例との比較 ― 数値指定のデメリット

❌ 数値指定（読みにくい）
.header  { grid-column: 1 / 3; grid-row: 1; }
.sidebar { grid-column: 1; grid-row: 2; }
.main    { grid-column: 2; grid-row: 2; }
.footer  { grid-column: 1 / 3; grid-row: 3; }
✅ grid-template-areas（構造が見える）
/* 親でレイアウト全体を一元管理 */
.layout {
  grid-template-areas:
    "header  header"
    "sidebar main"
    "footer  footer";
}
.header  { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main    { grid-area: main; }
.footer  { grid-area: footer; }
💡 現場の経験則
ページ全体の骨格レイアウトには grid-template-areas、グリッド内の細かいアイテム配置には数値指定——この使い分けが現場では自然と定着します。

応用 ― カードグリッドへの組み込み

記事カードのようなコンポーネントにも grid-template-areas は有効です。カード1枚の内部レイアウト——サムネイル・タイトル・本文・タグ——をGrid + areasで組むと、あとから要素の順序を変えるときにも修正が最小限で済みます。

カードコンポーネントへの応用
.article-card {
  display: grid;
  grid-template-columns: 120px 1fr;
  grid-template-rows: auto auto 1fr auto;
  grid-template-areas:
    "thumb  category"
    "thumb  title"
    "thumb  excerpt"
    "thumb  tags";
  gap: 4px 16px;
}

.card-thumb    { grid-area: thumb; }
.card-category { grid-area: category; }
.card-title    { grid-area: title; }
.card-excerpt  { grid-area: excerpt; }
.card-tags     { grid-area: tags; }
▶ Live Demo — カードレイアウト
🖼
CSS · Layout
grid-template-areasで
レイアウトを名前で設計する
数値ではなく言葉でグリッドを定義する。この発想がコードの読みやすさを変える。
CSS Grid Layout Responsive

カードのサムネイルが4行すべてにまたがってほしいとき——数値指定なら grid-row: 1 / 5 を書く必要がありますが、grid-template-areas では地図に thumb を縦に並べるだけで自動的にスパンされます。

⚠️ 注意
grid-template-areas で定義するセルは必ず長方形でなければなりません。L字やT字の形は定義できないため、そのような複雑なケースは数値指定と組み合わせましょう。

まとめ

  • grid-template-areas は、レイアウトの「地図」をCSSに文字列で書く仕組み。コードを読んだだけで画面構成がわかる。
  • 子要素には grid-area: 名前; を指定するだけ。数値でスパンを計算する必要がない。
  • メディアクエリで「地図」を書き換えるだけでレスポンシブが実現でき、子要素のCSS変更が不要。
  • 空白セルは .（ドット）で表現できる。
  • ページの骨格レイアウトやカードコンポーネントの内部構造など、構成が見通しやすい場所ほど効果を発揮する。
  • 定義できるセルの形は長方形のみ。L字・T字形は数値指定と組み合わせること。