FlexboxとGridの使い分け｜同じUIを両方で作り3つの画面幅で実測比較

FlexboxとGridの使い分けは、「中身の大きさに合わせて1方向に並べるならFlexbox、先に行と列の枠を決めて2方向にそろえるならGrid」です。 どちらが上ということはなく、1つの画面の中で両方を組み合わせるのが普通です。

ただ、この一文だけでは現場で迷います。そこでこの記事では、ヘッダー・カード一覧・フォーム・聖杯レイアウト（ヘッダー／3カラム／フッター）をFlexboxとGridの両方で同じ見た目を目指して実装し、Playwright（Chromium 141）で画面幅320px・768px・1280pxのときの要素の位置と幅を getBoundingClientRect() で測りました。「どちらでも作れるが、どこで差が出るか」を数値で示します。あわせて、gap、auto-fit/minmax()、subgrid、コンテナクエリ、よくある崩れ（flex-shrink、min-width: 0）も実測つきで整理します。

FlexboxとGridの使い分け早見表

まず判断フロー：迷ったらこの順に考える

「行と列の両方をそろえたいか」を最初に問うと、ほとんど迷いません。

flowchart TD
    A[並べたい要素がある] --> B{行と列の両方で<br>位置をそろえたい？}
    B -- はい --> G[Grid]
    B -- いいえ --> C{要素の数や幅が<br>中身しだいで変わる？}
    C -- はい --> F[Flexbox]
    C -- いいえ --> D{折り返した最終行も<br>同じ幅にしたい？}
    D -- はい --> G
    D -- いいえ --> F
    G --> E{子要素の中身も<br>親の列・行にそろえたい？}
    E -- はい --> S[Grid + subgrid]
    E -- いいえ --> G2[Grid のまま]

検証の条件

実測はすべて同じHTML・同じCSSで、画面幅だけを変えて行いました。

以下の表の数値は、この条件で実際に出力された値です。

1. ヘッダー：Flexboxが基本、ただし縮みに注意

ロゴ（幅120pxのブロック）・ナビ3項目・問い合わせボタンの横並びです。3通り用意しました。

/* A: Flexbox（基本形） */
.h-flex { display: flex; align-items: center; gap: 16px; }
.h-flex nav { display: flex; gap: 8px; margin-left: auto; } /* ナビ以降を右へ */

/* B: Flexbox（直した形） */
.h-flex-fix { flex-wrap: wrap; }
.h-flex-fix .logo { flex-shrink: 0; } /* ロゴは縮ませない */

/* C: Grid */
.h-grid { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px; }

実測結果（ロゴ幅／ヘッダーの高さ／はみ出し量）

わかったことは3つです。

• Flexboxの子は、既定で flex-shrink: 1 なので、場所が足りないと縮みます。 今回は中身のないロゴが0pxまで縮み、それでも足りない分がはみ出しました。
• flex-shrink: 0 と flex-wrap: wrap を足すと、はみ出しは0pxになり、自然に折り返します。
• Gridの auto 列は中身の最小幅より小さくならないため、狭い画面ではFlexboxより大きくはみ出しました。Gridでヘッダーを作るなら、狭い幅用に列の定義をメディアクエリで切り替えるとよいです。

768px以上ではどれも同じ見た目です。要素の数や幅が変わりやすいヘッダーは、Flexbox＋flex-wrapが手堅い選択です。

2. カード一覧：最終行の幅で差が出る

5枚のカードを「1枚あたり最小240px」で並べます。

/* Flexbox */
.c-flex { display: flex; flex-wrap: wrap; gap: 16px; }
.c-flex .card { flex: 1 1 240px; }

/* Grid */
.c-grid { display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

実測結果（カード5枚の幅）

Flexboxでは、折り返した最終行の1枚が残りの幅をすべて使って伸びました。 これは flex-grow: 1 の正しい動きです。タグやボタンのように「行ごとに詰めたい」ならこの動きが便利で、カードのように「全部同じ幅にしたい」ならGridが向いています。

auto-fit と auto-fill の違い

カードが2枚しかない場合も測りました（1280px）。

件数が少ないときに横いっぱいに広げたいなら auto-fit、件数に関係なく同じカード幅にしたいなら auto-fill を選びます。

3. subgrid：カードの中の見出しと本文をそろえる

カードの見出しの長さが違うと、本文の開始位置がカードごとにずれます。subgrid を使うと、カードの中の行を親グリッドの行に合わせられます。

.s-grid { display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }

/* subgridなし：カードごとに独立したグリッド */
.s-grid .card { display: grid; grid-template-rows: auto 1fr auto; gap: 8px; }

/* subgridあり：カードが親の3行分を使い、行の高さを共有する */
.s-sub .card { grid-row: span 3; grid-template-rows: subgrid; }

実測結果（1280px、1行目の3枚）

768px（2列）でも、subgridなしは本文の開始位置が27pxずれ、subgridありは同じ位置になりました。ボタンは 1fr のおかげでどちらもそろいますが、見出し・本文の境目までそろうのはsubgridだけです。

subgrid は2023年9月に主要ブラウザで使えるようになり、MDNでは「Baseline Widely available」と表示されています。

4. フォーム：ラベル列の幅をGridに任せる

ラベルと入力欄の2列です。ラベルの長さが「氏名」「メールアドレス」「電話」と違います。

/* Flexbox：1行ずつ横並び */
.f-flex .row { display: flex; gap: 8px; margin-bottom: 8px; }
.f-flex input { flex: 1; min-width: 0; }

/* Grid：フォーム全体で2列 */
.f-grid { display: grid; grid-template-columns: max-content 1fr; gap: 8px; }

実測結果（入力欄の左端 x）

Flexboxは行ごとに独立しているので、ラベルが長い行だけ入力欄が右にずれます（80px）。 Flexboxでそろえるにはラベルに固定幅を付ける必要がありますが、Gridは max-content で一番長いラベルに列幅を自動で合わせるので、文言が変わっても崩れません。

5. 聖杯レイアウト：どちらでも作れるが、HTMLの形が変わる

ヘッダー／ナビ・メイン・サイド／フッターの定番レイアウトです。768px以上で3カラム、それ未満で縦積みにします。

/* Grid：HTMLはフラットなまま */
.hg-grid { display: grid; gap: 8px;
  grid-template-areas: "hd" "nv" "mn" "as" "ft"; }
@media (min-width: 768px) {
  .hg-grid {
    grid-template-columns: 160px minmax(0, 1fr) 200px;
    grid-template-areas: "hd hd hd" "nv mn as" "ft ft ft";
  }
}
.hg-grid > header { grid-area: hd; } /* nav, main, aside, footer も同様 */

/* Flexbox：中段をまとめる div.mid が必要 */
.hg-flex { display: flex; flex-direction: column; gap: 8px; }
.hg-flex .mid { display: flex; flex-direction: column; gap: 8px; }
@media (min-width: 768px) {
  .hg-flex .mid { flex-direction: row; }
  .hg-flex .mid > nav { flex: 0 0 160px; }
  .hg-flex .mid > main { flex: 1; min-width: 0; }
  .hg-flex .mid > aside { flex: 0 0 200px; }
}

実測結果（nav／main／aside の幅）

どちらも意図どおりに並びました。mainの幅の差16pxは、Flexbox版で追加した div.mid に付けた左右の余白の分です。つまりFlexboxでは2次元の骨格を作るために入れ子の要素が1つ増え、その要素のスタイルも考える必要があります。 GridはHTMLをフラットに保ったまま、grid-template-areas の文字列を書きかえるだけで配置を変えられるのが強みです。

6. よくある崩れ：長いコードやURLで横にはみ出す

サイド120px＋メインの2カラムで、メインに改行のない長い1行（pre 要素、overflow: auto 付き）を入れました。

/* Flexbox */
.mw-flex { display: flex; gap: 8px; }
.mw-flex main { flex: 1; }
.mw-flex.fix main { min-width: 0; }          /* 直した形 */

/* Grid */
.mw-grid { display: grid; gap: 8px; grid-template-columns: 120px 1fr; }
.mw-grid.fix { grid-template-columns: 120px minmax(0, 1fr); } /* 直した形 */

実測結果（メインの幅／コンテナからのはみ出し量）

FlexboxとGridで同じ量だけはみ出し、同じように直りました。 原因も共通です。

• Flexboxの子は既定で min-width: auto なので、中身の最小幅より小さくなれません。
• Gridの 1fr は minmax(auto, 1fr) と同じ意味なので、やはり中身の最小幅が下限になります。

直し方は「最小幅を0にする」の1点です。 Flexboxなら子に min-width: 0、Gridなら列に minmax(0, 1fr) を指定すると、pre の overflow: auto が働き、コードブロックの中だけがスクロールするようになります。

7. コンテナクエリ：置き場所の幅でレイアウトを変える

同じカード部品を、広いメイン列と狭いサイド列に置きます。メディアクエリは画面幅、コンテナクエリは部品を包む要素の幅で判定します。

.cq { container-type: inline-size; }          /* 判定の基準になる要素 */
.media { display: grid; gap: 8px; grid-template-columns: 1fr; }
@container (min-width: 400px) {
  .media { grid-template-columns: 120px 1fr; } /* 400px以上なら画像を左に */
}

実測結果（コンテナ幅 → 画像の幅と配置）

768pxでは、同じ画面幅なのに置き場所によって違うレイアウトになりました。1280pxではサイド列も400pxを超えたので横並びに切り替わっています。部品単位で作るコンポーネント設計とGridの相性がよいことがわかります。サイズのコンテナクエリは、2023年2月に主要ブラウザで使えるようになっています。

gap：どちらでも使える余白の指定

gap（row-gap/column-gap）はGridとFlexboxの両方で使えます。要素の間だけに余白が入るので、margin で最後の要素だけ打ち消すといった調整が不要になります。

subgridの子は親の gap を引き継ぎます。子で gap を指定すると上書きできます。

組み合わせ方の定番

実務では「外側の骨格はGrid、部品の中の1行はFlexbox」という組み合わせがいちばん多い形です。

実装前のチェックリスト

• 行と列の両方をそろえる必要があるか（あればGrid）
• 折り返した最終行の幅をどうしたいか（そろえるならGrid）
• 縮んでほしくない要素に flex-shrink: 0 を付けたか
• 長いURL・コードが入る列に min-width: 0 または minmax(0, 1fr) を指定したか
• 件数が少ないときの見え方を auto-fit と auto-fill で確認したか
• 部品の置き場所で見た目を変えたいならコンテナクエリを使ったか
• 幅320px前後で横スクロールが出ていないか確認したか

よくある質問

Q. 全部Gridで作ってもよいですか？ A. 作れますが、ナビやボタン群のように中身の幅に合わせて並べたい部分はFlexboxのほうが短く書けます。今回のヘッダーの実測でも、Gridの auto 列は狭い画面で258pxはみ出しました。役割で使い分けるのが近道です。

Q. Flexboxで最終行のカードが伸びるのを止めるには？ A. カードに flex-grow: 0 と固定の flex-basis を指定する方法もありますが、行の右側に余白が残ります。すべて同じ幅で並べたいなら、Gridの repeat(auto-fill, minmax(240px, 1fr)) に切り替えるのがいちばん簡単です。

Q. min-width: 0 はいつ付ければよいですか？ A. Flexboxで伸び縮みする子（flex: 1 など）に、長いテキストやコード、表、画像が入る可能性があるときです。Gridでは 1fr の代わりに minmax(0, 1fr) を使います。

Q. メディアクエリとコンテナクエリはどう使い分けますか？ A. ページの骨格（何カラムにするか）はメディアクエリ、部品の見た目（横並びか縦積みか）はコンテナクエリ、と分けると整理しやすくなります。

まとめ

• 1方向に中身の大きさで並べるならFlexbox、行と列を枠からそろえるならGrid
• 折り返した最終行は、Flexboxだと伸び、Gridだと列幅がそろう（1280pxで1230px対296pxを実測）
• ラベルと入力欄はGridの max-content で自動的に縦位置がそろう
• subgridでカード内の見出し・本文の境目までそろえられる（ずれ27px→0px）
• はみ出しの原因は min-width: auto と 1fr の最小幅。min-width: 0 と minmax(0, 1fr) で直る
• コンテナクエリで、置き場所の幅に合わせて部品のレイアウトを切り替えられる

株式会社RJCでは、レイアウトの判断を実際に測って確かめる習慣を、プロジェクトの中で仲間と学び合っています。こうした知識を共有しながら、日々技術を磨いています。

株式会社RJC ― SI事業・SES事業・AI駆動開発。RJCは一緒に成長を楽しめる会社です。