CSS Grid vs Flexbox：どちらをいつ使うべきか

Frontend2026-09-23TryQuickToolBox

Grid vs Flexboxの議論が繰り返される理由

レイアウトを構築しているとします。習慣でFlexboxに手を伸ばしますが、途中でブラウザと格闘していることに気づきます。ネストされたラッパー、パーセンテージ幅、そして不格好な配置ハック。一方で、同僚はCSS Gridなら3行で解決できたはずだと主張します。どちらのツールも強力ですが、解決する問題が異なります。間違った方を選ぶと、脆いCSSと無駄な時間につながります。

このガイドはノイズを排除します。CSS GridとFlexboxの核となるメンタルモデルを学び、並べて比較し、すぐに適用できる実践的な意思決定チェックリストを手に入れましょう。

核となるメンタルモデル

Flexboxは一次元です。単一の軸（行または列）に沿ってアイテムを配置し、スペースを分配します。折り返し可能な柔軟な線と考えてください。Gridは二次元です。行と列を同時に定義し、アイテムを正確なマトリックスに配置できます。ページのスプレッドシートと考えてください。

どちらが「優れている」わけではありません。それらは補完的です。ほとんどの実世界のレイアウトは両方を使用します。ページ全体の骨格にはGrid、ナビゲーションバーやボタングループなどの小さなコンポーネントにはFlexboxです。

Flexboxを使うべき時

レイアウトが主に一方向に流れ、コンテンツのサイズがレイアウトを決定すべき場合にFlexboxに手を伸ばします。一般的なシナリオ：

ナビゲーションバー： リンクの行を均等に配置したり、ロゴを左にメニューを右に押し出したりする。
カードの内容： カード内でアイコン、タイトル、説明を垂直に整列する。
ボタングループ： 一貫した間隔を持つボタンのセット。
単一要素の中央揃え： 古典的な display: flex; justify-content: center; align-items: center;。
動的コンテンツ： アイテム数が不明で、自然に折り返したい場合。

Flexboxは残りのスペースの分配と、アイテム同士の相対的な整列に優れています。コンテンツファーストです。アイテムがコンテナのサイズを決定します。

CSS Gridを使うべき時

行と列の両方を制御する必要がある場合、またはHTML内の順序に関係なくアイテムを特定の領域に配置したい場合にGridを選択します。理想的な使用例：

ページレベルのレイアウト： ヘッダー、サイドバー、メインコンテンツ、フッターをテンプレートに配置。
複雑なカードグリッド： 一部のカードが2列または2行にまたがるギャラリー。
重なり合う要素： 同じグリッドセルを使ってアイテムを重ねて配置。
一貫したガター： gapを使って行と列を均一に間隔を空ける。
メディアクエリなしのレスポンシブ： grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); で1行でレスポンシブグリッドを作成。

Gridはレイアウトファーストです。構造を定義し、アイテムがそこに配置されます。これにより、ページ全体のアーキテクチャに最適です。

CSS Grid vs Flexbox：簡単な比較

機能	Flexbox	CSS Grid
次元	1D（行または列）	2D（行と列）
アプローチ	コンテンツファースト	レイアウトファースト
アイテム配置	フローベース、順序変更可能	セルへの明示的な配置
折り返し	flex-wrap	グリッドトラックによる暗黙的
Gapサポート	あり（モダンブラウザ）	あり
最適な用途	コンポーネント、ツールバー、中央揃え	ページレイアウト、複雑なグリッド

効果的に組み合わせる方法

真のパワームーブは、一方を他方の中にネストすることです。典型的なパターン：

メインページ領域（ヘッダー、サイドバー、メイン、フッター）にGridを使用。
ヘッダー内で、ロゴとナビゲーションリンクを整列するためにFlexboxを使用。
メイン領域内で、カードのギャラリーにGridを使用。
各カード内で、画像、タイトル、テキストを垂直に配置するためにFlexboxを使用。

このハイブリッドアプローチはCSSをモジュール化し、過剰な設計を避けます。必要な場所でGridの構造的制御を得て、小さな部分にはFlexboxの柔軟な整列を得られます。

実践的なコード例

Flexbox：ナビゲーションバー

.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}
.nav-links {
  display: flex;
  gap: 1.5rem;
  list-style: none;
}

Grid：レスポンシブカードギャラリー

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

この1行で、メディアクエリなしでどんな画面サイズにも対応します。Flexboxは列定義がないため、これを同じようにクリーンに実現できません。

Grid：名前付きエリアを使ったページレイアウト

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

名前付きエリアはレイアウトを自己文書化します。ページの再配置はテンプレート文字列を編集するだけになります。

よくある落とし穴と回避方法

2DレイアウトにFlexboxを使う： ネストされたflexコンテナとパーセンテージ幅になってしまいます。Gridに切り替えましょう。
単純なアイテムの行にGridを使う： 動作しますが、未知のコンテンツサイズにはFlexboxの方がシンプルで柔軟なことが多いです。
flexアイテムにmin-width: 0を忘れる： 長いテキストや画像でのオーバーフロー問題を防ぎます。
orderの過剰使用： DOM順序を更新せずに視覚的順序を変更するとアクセシビリティが損なわれます。可能な場合はGrid配置を使いましょう。
gapを無視する： GridとFlexboxの両方がgapをサポートし、マージンハックを排除します。

意思決定チェックリスト：どちらを使うべきか？

自分にこれらの質問をしてください：

レイアウトが行と列の両方を制御する必要があるか？ → Grid。
コンテンツが一方向に流れ、サイズがコンテンツによって決まるべきか？ → Flexbox。
アイテムを特定の領域に配置したり重ねたりする必要があるか？ → Grid。
コンテナ内のいくつかのアイテムを整列しているか？ → Flexbox。
メディアクエリなしでレスポンシブグリッドが欲しいか？ → auto-fitを使ったGrid。

まだ確信が持てない場合は、コンポーネントにはFlexbox、ページにはGridから始めましょう。後でいつでもリファクタリングできます。

FAQ

CSS GridとFlexboxを一緒に使えますか？

もちろんです。それらは互いを補完するように設計されています。ページ全体の構造にはGrid、ナビゲーションバー、ツールバー、カードの内容などの小さなコンポーネントにはFlexboxを使用しましょう。

Gridが存在する今、Flexboxは時代遅れですか？

いいえ。Flexboxは一次元レイアウトとコンテンツ駆動のサイジングに最適な選択肢であり続けます。Gridは置き換えではなく、二次元レイアウトのための追加ツールです。

どちらがブラウザサポートが良いですか？

どちらもChrome、Firefox、Safari、Edgeを含むすべてのモダンブラウザでサポートされています。非常に古いブラウザにはフォールバックが必要かもしれませんが、今日のほとんどのプロジェクトではどちらも問題なく使用できます。

レイアウトのアイデアを素早くテストする準備はできましたか？HTML to Imageコンバーターを使って、HTML/CSSモックアップをデザインレビューやドキュメント用の共有可能な画像に変換しましょう。