【CSS】Grid入門｜FlexboxとGridの使い分けが分かる | ググっても分からなかった初心者へ

この記事で分かること

CSS Gridの基本的な使い方と、Flexboxとの使い分けを理解できます。

「Flexboxは分かるけど、Gridはいつ使えばいいの？」という疑問を解消します。

FlexboxとGridの違い

ざっくり言うと：

Flexbox → 一方向（横並び or 縦並び）のレイアウト
Grid → 二次元（縦横同時）のレイアウト

カードを横に並べるだけならFlexbox。ヘッダー・サイドバー・メイン・フッターのようなページ全体のレイアウトにはGridが向いています。

手順

ステップ1: 基本のGridを作る

まず、3列のグリッドを作ってみます。

<div class="grid-container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
</div>

/* 親要素にdisplay: gridを指定 */
.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr; /* 3等分 */
  gap: 16px; /* 要素間の余白 */
}

.item {
  background: #e0f2fe;
  padding: 24px;
  text-align: center;
  border-radius: 8px;
}

grid-template-columns で列の数と幅を指定します。1fr は「残りのスペースを均等に分ける」という意味です。fraction（分数）の略ですね。

これだけで、6つの要素が3列×2行に並びます。

ステップ2: 列幅を変える

均等分割だけでなく、列ごとに幅を変えられます。

/* サイドバー200px + メイン（残り全部） */
.grid-container {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 16px;
}

px と fr を混ぜて使えるのがGridの便利なところです。サイドバーは固定幅、メインは画面幅に合わせて伸縮します。

ステップ3: repeat()で繰り返す

同じ幅の列をたくさん作るなら repeat() が便利です。

/* 4列を均等に */
.grid-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

repeat(4, 1fr) は 1fr 1fr 1fr 1fr と同じ意味です。列数が多いときにコードがすっきりします。

ステップ4: レスポンシブ対応

画面幅に応じて列数を自動調整するには auto-fit と minmax() を組み合わせます。

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 16px;
}

これは「各列は最低250px、余裕があれば均等に広がる。入りきらなければ自動で折り返す」という意味です。メディアクエリなしでレスポンシブになります。

ステップ5: ページレイアウトを組む

Gridの本領発揮です。ヘッダー・サイドバー・メイン・フッターのレイアウトを作ります。

.page {
  display: grid;
  grid-template-columns: 240px 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
  min-height: 100vh;
}

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

grid-template-areas で名前をつけてレイアウトを視覚的に定義できます。どこに何が配置されるか、CSSを見ただけで分かるのがGridの強みです。

完成コード

コピペで動くページレイアウトの全体コードです。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Grid レイアウト</title>
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }

    .page {
      display: grid;
      grid-template-columns: 240px 1fr;
      grid-template-rows: auto 1fr auto;
      grid-template-areas:
        "header header"
        "sidebar main"
        "footer footer";
      min-height: 100vh;
      gap: 1px;
    }

    .header {
      grid-area: header;
      background: #1e293b;
      color: white;
      padding: 16px 24px;
    }

    .sidebar {
      grid-area: sidebar;
      background: #f1f5f9;
      padding: 16px;
    }

    .main {
      grid-area: main;
      padding: 24px;
    }

    .footer {
      grid-area: footer;
      background: #1e293b;
      color: white;
      padding: 16px 24px;
      text-align: center;
    }
  </style>
</head>
<body>
  <div class="page">
    <header class="header">ヘッダー</header>
    <aside class="sidebar">サイドバー</aside>
    <main class="main">メインコンテンツ</main>
    <footer class="footer">フッター</footer>
  </div>
</body>
</html>

まとめと次のステップ

Flexbox → 一方向の並び（ナビバー、カード横並び）
Grid → 二次元のレイアウト（ページ全体、ダッシュボード）

迷ったら「行と列の両方を制御したいか？」で判断すると分かりやすいです。

次のステップとして、grid-column や grid-row で要素を複数セルにまたがらせる方法を試してみてください。