カテゴリー
お問い合わせ

【CSS】もう迷わない！FlexboxとCSS Gridの違いと使い分け方

HTML/CSS
目次

Webサイトのレイアウトを組む際、CSSには 「Flexbox（フレックスボックス）」 と 「CSS Grid（グリッド）」 という2つの強力な機能が用意されています。 しかし、「どっちを使えばいいの？」と迷ってしまうことも多いのではないでしょうか？

結論から言うと、この2つは競合するものではなく、得意な領域が違うため「適材適所で使い分ける」 のが正解です！

今回は、「こういう時はFlexbox」「こういう時はGrid」という具体的な使い分けの基準を、シンプルなデモを交えてご紹介します。（※Flexbox, CSS Gridのより詳しい使い方については、今後の別記事でじっくり解説する予定です！）

デモ動作

See the Pen FlexboxとCSS Gridの使い分け by mikanbako (@mikanbako) on CodePen.

全画面でのデモ動作は以下のリンクからご確認下さい！（別タブで開かれます）

実装コード紹介

【HTML】

<div class="l-wrap">
  <h2>Flexbox と CSS Grid の使い分けデモ</h2>
  <p class="p-desc">それぞれの「得意なこと」を視覚的に比較してみましょう！</p>
  
  <div class="p-demo-box">
    
    <!-- ⭕️ Flexbox の得意分野：1方向（横）の並び -->
    <div class="p-card">
      <h3 class="p-card__title">1.1. Flexbox の例（横並び）</h3>
      <p class="p-card__text">要素の中身に合わせて、横一列に柔軟に並べるのが得意です。</p>
      
      <ul class="c-flex-nav c-flex-nav--row">
        <li class="c-flex-nav__item">Home</li>
        <li class="c-flex-nav__item">About</li>
        <li class="c-flex-nav__item">Services & Pricing</li>
        <li class="c-flex-nav__item">Contact</li>
      </ul>
    </div>

    <!-- ⭕️ Flexbox の得意分野：1方向（縦）の並び -->
    <div class="p-card">
      <h3 class="p-card__title">1.2. Flexbox の例（縦積み）</h3>
      <p class="p-card__text">要素の中身に合わせて、縦一列に並べます。</p>
      
      <ul class="c-flex-nav c-flex-nav--column">
        <li class="c-flex-nav__item">Home</li>
        <li class="c-flex-nav__item">About</li>
        <li class="c-flex-nav__item">Services & Pricing</li>
        <li class="c-flex-nav__item">Contact</li>
      </ul>
    </div>

    <!-- ⭕️ CSS Grid の得意分野：2方向（行と列）のマス目配置 -->
    <div class="p-card">
      <h3 class="p-card__title">2. CSS Grid の例（カードのタイル配置）</h3>
      <p class="p-card__text">縦と横の「マス目」を作り、そこにピッタリはめ込むのが得意です。</p>
      
      <div class="c-grid-layout">
        <div class="c-grid-card">Item A</div>
        <div class="c-grid-card">Item B</div>
        <div class="c-grid-card">Item C</div>
        <div class="c-grid-card">Item D</div>
        <div class="c-grid-card">Item E</div>
        <div class="c-grid-card">Item F</div>
        <div class="c-grid-card">Item G</div>
        <div class="c-grid-card">Item H</div>
        <div class="c-grid-card">Item I</div>
      </div>
    </div>

  </div>
</div>

【CSS】

/* ベース装飾 */
.l-wrap {
  max-width: 800px;
  margin: 0 auto;
  padding: 40px 20px;
  text-align: center;
  color: #3e3e3e;
}

h2 {
  margin-bottom: 16px;
  font-size: 16px;
  color: #1bb4d4;
}

.p-desc {
  margin-bottom: 40px;
  font-size: 16px;
  font-weight: bold;
  color: #666;
  line-height: 1.6;
}

/* レイアウト調整 */
.p-demo-box {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.p-card {
  padding: 30px;
  text-align: left;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 15px rgb(0 0 0 / 5%);
}

.p-card__title {
  padding-bottom: 10px;
  margin-bottom: 10px;
  font-size: 16px;
  color: #333;
  border-bottom: 2px solid #eee;
}

.p-card__text {
  margin-bottom: 20px;
  font-size: 14px;
  color: #666;
}

/* =========================================
   💡 1. Flexbox のスタイル（1次元）
========================================= */
.c-flex-nav {
  display: flex; /* フレックスボックスを有効化 */
  gap: 16px; /* 要素のすき間 */
}

/* 1.1. 横並び */
.c-flex-nav--row {
  flex-direction: row; /* デフォルトで横並び設定 */
}

/* 1.2. 縦積み */
.c-flex-nav--column {
  flex-direction: column; /* 縦積み */
  align-items: center;
}

.c-flex-nav__item {
  padding: 10px 20px;
  font-size: 14px;
  font-weight: bold;
  color: #fff;
  background: #1bb4d4;
  border-radius: 6px;

  /* 文字の長さに合わせて横幅が自動で決まります */
}

/* =========================================
   💡 2. CSS Grid のスタイル（2次元）
========================================= */
.c-grid-layout {
  display: grid; /* グリッドを有効化 */

  /* ↓ 3列（1fr 1fr 1fr）で配置するという明示的なルール */
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px; /* 縦横のすき間 */
}

.c-grid-card {
  padding: 20px;
  font-size: 14px;
  font-weight: bold;
  color: #fff;
  text-align: center;
  background: #e83e8c;
  border-radius: 6px;
}

コードの解説・仕組み

Flexbox は「1次元（線）」

/* =========================================
   💡 1. Flexbox のスタイル（1次元）
========================================= */
.c-flex-nav {
  display: flex; /* フレックスボックスを有効化 */
  gap: 16px; /* 要素のすき間 */
}

/* 1.1. 横並び */
.c-flex-nav--row {
  flex-direction: row; /* デフォルトで横並び設定 */
}

/* 1.2. 縦積み */
.c-flex-nav--column {
  flex-direction: column; /* 縦積み */
  align-items: center;
}

要素を「横一列」または「縦一列」に並べるためのツールです。要素のコンテンツ量（文字の長さなど）に応じて、柔軟にサイズを伸縮させたい時に使います。

【よく使う場面】
ナビゲーションメニュー、アイコンとテキストの並び、ボタンのグループなど、部品（コンポーネント）レベルの細かなレイアウト。

CSS Grid は「2次元（面）」

/* =========================================
   💡 2. CSS Grid のスタイル（2次元）
========================================= */
.c-grid-layout {
  display: grid; /* グリッドを有効化 */

  /* ↓ 3列（1fr 1fr 1fr）で配置するという明示的なルール */
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px; /* 縦横のすき間 */
}

縦（列）と横（行）のマス目（グリッド）を先に定義し、そこに要素をはめ込んでいくためのツールです。

【よく使う場面】
ページ全体の骨組み（ヘッダー・メイン・サイドバー・フッターの配置）や、画像ギャラリー、カードのタイル配置など、規則的で大きなレイアウト。

補足：公式ドキュメント

より詳細な仕様や他の活用例について知りたい方は、ぜひMDNの公式ドキュメントもチェックしてみてください！

・MDN: CSS フレックスボックスレイアウト
・MDN: CSS グリッドレイアウト
・MDN: flex
・MDN: grid

まとめ

「とりあえず何でもFlexboxで組む」というのも可能ですが、マス目状のレイアウトをFlexboxで無理やり作ろうとすると、幅の計算（width: calc(...) など）が複雑になりがちです。

「中身のコンテンツに合わせて並べるならFlexbox」「外枠のルール（マス目）に合わせて配置するならGrid」 という基準を持っておくと、コーディングが楽になり、スッキリとしたCSSを書くことができます。ぜひ皆さんも適材適所で使い分けてみてください！

Prev
Next

関連記事