CSS Gridで実際のWebページレイアウトを作ろう【3つの実践パターン】

導入

CSS Gridの基本は学んだけど、実際のWebページにどう使えばいいかわからない。そんな悩みはありませんか？

この記事では、CSS Gridを使った「本物のWebページ」のレイアウトを3パターン紹介します。

• パターン1：ヘッダー・サイドバー・メイン・フッターの基本構成
• パターン2：カードが並ぶギャラリーレイアウト
• パターン3：ダッシュボード風の複雑なレイアウト

すべてコピーして使える完成コードつきです。CSS Gridの基本を読んでおくと、よりスムーズに理解できます。

パターン1：基本ページレイアウト

多くのWebサイトで使われる定番の構成です。ヘッダー・サイドバー・メイン・フッターの4つのエリアを配置します。

HTML

<div class="page-layout">
  <header class="header">ヘッダー</header>
  <aside class="sidebar">サイドバー</aside>
  <main class="main">メインコンテンツ</main>
  <footer class="footer">フッター</footer>
</div>

CSS

.page-layout {
  display: grid;
  grid-template-columns: 200px 1fr;
  grid-template-rows: 60px 1fr 50px;
  grid-template-areas:
    "header  header"
    "sidebar main"
    "footer  footer";
  min-height: 100vh;
  gap: 0;
}

.header {
  grid-area: header;
  background-color: #2c3e50;
  color: #ffffff;
  display: flex;
  align-items: center;
  padding: 0 20px;
}

.sidebar {
  grid-area: sidebar;
  background-color: #34495e;
  color: #ffffff;
  padding: 20px;
}

.main {
  grid-area: main;
  background-color: #ecf0f1;
  padding: 20px;
}

.footer {
  grid-area: footer;
  background-color: #2c3e50;
  color: #ffffff;
  display: flex;
  align-items: center;
  padding: 0 20px;
}

ポイント解説

grid-template-areasは、レイアウトを「名前」で指定する方法です。文字で配置を書くので、見た目がそのまま構造になります。

• "header header"：ヘッダーは2列分の幅
• "sidebar main"：サイドバーとメインが横に並ぶ
• "footer footer"：フッターも2列分の幅

1frは「残りのスペースを全部使う」という意味です。サイドバーが200px、残りがメインになります。

CSSの基本で、CSSの書き方を復習できます。

パターン2：カードギャラリー

画像やコンテンツのカードが、画面幅に合わせて自動的に並ぶレイアウトです。ポートフォリオサイトや商品一覧でよく使われます。

HTML

<div class="card-gallery">
  <div class="card">
    <div class="card-image">🖼️</div>
    <h3>作品タイトル1</h3>
    <p>説明テキストが入ります。</p>
  </div>
  <div class="card">
    <div class="card-image">🖼️</div>
    <h3>作品タイトル2</h3>
    <p>説明テキストが入ります。</p>
  </div>
  <div class="card">
    <div class="card-image">🖼️</div>
    <h3>作品タイトル3</h3>
    <p>説明テキストが入ります。</p>
  </div>
  <div class="card">
    <div class="card-image">🖼️</div>
    <h3>作品タイトル4</h3>
    <p>説明テキストが入ります。</p>
  </div>
  <div class="card">
    <div class="card-image">🖼️</div>
    <h3>作品タイトル5</h3>
    <p>説明テキストが入ります。</p>
  </div>
  <div class="card">
    <div class="card-image">🖼️</div>
    <h3>作品タイトル6</h3>
    <p>説明テキストが入ります。</p>
  </div>
</div>

CSS

.card-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
  padding: 20px;
}

.card {
  background-color: #ffffff;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.card-image {
  font-size: 48px;
  text-align: center;
  padding: 20px 0;
  background-color: #f8f9fa;
  border-radius: 8px;
  margin-bottom: 12px;
}

.card h3 {
  margin: 0 0 8px 0;
  font-size: 16px;
}

.card p {
  margin: 0;
  font-size: 14px;
  color: #666666;
}

ポイント解説

repeat(auto-fill, minmax(250px, 1fr))がこのパターンの核心です。

• auto-fill：入るだけカードを並べる
• minmax(250px, 1fr)：最小250px、最大は均等に広がる

この1行だけで、画面幅に応じてカードの列数が自動で変わります。レスポンシブ対応が@mediaなしで実現できます。

CSS Flexboxガイドとの使い分けも知っておくと便利です。1次元の並びはFlexbox、2次元のレイアウトはGridが向いています。

パターン3：ダッシュボード風レイアウト

大きさの異なるパネルが組み合わさったレイアウトです。管理画面やデータ表示ページで使われます。

HTML

<div class="dashboard">
  <div class="panel chart">
    <h3>📊 メインチャート</h3>
    <p>グラフがここに表示されます</p>
  </div>
  <div class="panel summary">
    <h3>📋 サマリー</h3>
    <p>今日の学習: 45分</p>
  </div>
  <div class="panel recent">
    <h3>🕐 最新情報</h3>
    <ul>
      <li>JavaScriptを学習</li>
      <li>CSSを復習</li>
    </ul>
  </div>
  <div class="panel stat1">
    <h3>✅ 完了タスク</h3>
    <p class="big-number">12</p>
  </div>
  <div class="panel stat2">
    <h3>🔥 連続日数</h3>
    <p class="big-number">7</p>
  </div>
</div>

CSS

.dashboard {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 200px 150px;
  grid-template-areas:
    "chart   chart   summary"
    "stat1   stat2   recent";
  gap: 15px;
  padding: 20px;
  background-color: #1a1a2e;
  min-height: 100vh;
}

.panel {
  background-color: #16213e;
  border-radius: 12px;
  padding: 20px;
  color: #ffffff;
}

.panel h3 {
  margin: 0 0 10px 0;
  font-size: 14px;
  color: #aaaaaa;
}

.chart   { grid-area: chart; }
.summary { grid-area: summary; }
.recent  { grid-area: recent; }
.stat1   { grid-area: stat1; }
.stat2   { grid-area: stat2; }

.big-number {
  font-size: 48px;
  font-weight: bold;
  margin: 10px 0 0 0;
  color: #4ecdc4;
}

ポイント解説

grid-template-areasで、各パネルの配置を名前で指定しています。chartは2列分の幅を占めます。名前をつけることで、HTMLの順番を変えなくてもCSSだけでレイアウトを変更できます。

レスポンシブ対応のコツ

スマホでも見やすくするために、画面幅が狭いときはレイアウトを変えましょう。

パターン1のレスポンシブ対応

@media (max-width: 768px) {
  .page-layout {
    grid-template-columns: 1fr;
    grid-template-rows: 60px auto 1fr 50px;
    grid-template-areas:
      "header"
      "sidebar"
      "main"
      "footer";
  }
}

スマホでは1列にして、サイドバーをメインの上に移動させます。

パターン3のレスポンシブ対応

@media (max-width: 768px) {
  .dashboard {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas:
      "chart"
      "summary"
      "stat1"
      "stat2"
      "recent";
  }
}

すべてのパネルを縦1列に並べます。

@mediaとは、画面幅に応じてCSSを切り替える仕組みです。レスポンシブデザインの基本で詳しく学べます。

パターン2は対応不要

auto-fillとminmaxを使っているので、画面幅に自動で対応します。これがCSS Gridの強力なポイントです。

3パターンの使い分け

• パターン1（基本レイアウト） — ブログ、企業サイト、ドキュメントサイト
• パターン2（カードギャラリー） — ポートフォリオ、商品一覧、ギャラリー
• パターン3（ダッシュボード） — 管理画面、学習記録、データ表示

まずはパターン1で基本を押さえて、慣れたらパターン2・3に挑戦しましょう。

まとめ

この3パターンを組み合わせれば、ほとんどのWebページのレイアウトが作れます。ぜひ自分のサイトで試してみてください。