技術入門 2026年4月10日

CSS FlexboxとGrid完全ガイド｜レイアウトをマスターして脱・初心者【2026年版】

CSS FlexboxとGridの使い方を実例つきで徹底解説。どちらをいつ使うべきか、現役フリーランスエンジニアが判断基準から実装パターンまで丁寧に説明します。

CSSFlexboxGridレイアウトフロントエンド初心者

※当サイトはアフィリエイトプログラムに参加しています。記事内のリンクから商品を購入すると、当サイトに報酬が支払われることがあります。詳しくはプライバシーポリシーをご覧ください。

「CSSのレイアウトって、なんでこんなに難しいの?」

正直、当時の僕は本当に苦労しました。floatでレイアウトを組もうとして謎のズレが起きる、position: absoluteでなんとかしようとして全部崩れる。「思った通りのデザインにならない」というストレスが一番しんどかった。

転機はFlexboxとGridを理解したときでした。この2つを覚えてから、CSSのレイアウトが「パズル」から「計算問題」に変わった感覚がありました。「こういう配置にしたいなら、こう書けばいい」と、ロジカルに考えられるようになったんです。

結論から言うと、現代のCSSレイアウトはFlexboxとGridの2択です。この2つをマスターすれば、Webデザインの実装で詰まることはほぼなくなります。

この記事では、Flexboxの基本からGridの応用まで、実際のコードと図解で解説します。

CSSのイメージ

FlexboxとGridの使い分け

最初に結論を言います。

Flexbox → 1方向（横または縦）のレイアウト
Grid    → 2方向（横と縦の両方）のレイアウト

Flexboxが向いている場面:

ナビゲーションメニュー（横並び）
ボタンやバッジの配置
カードの横並び
縦・横の中央揃え

Gridが向いている場面:

ページ全体のレイアウト（ヘッダー・サイドバー・メイン・フッター）
写真ギャラリー
ダッシュボードのウィジェット配置
複雑な格子状レイアウト

ここがポイントなんですが、どちらかが優れているわけではなく、用途が違うだけです。実際の開発では両方を組み合わせて使います。

Flexboxをマスターする

基本の設定

.container {
  display: flex;          /* Flexコンテナを定義 */
  flex-direction: row;    /* 横並び（デフォルト） */
  /* flex-direction: column; で縦並び */
}

display: flexを指定した要素がFlexコンテナ、その直接の子要素がFlexアイテムになります。

方向の制御

.container {
  display: flex;
  flex-direction: row;            /* 左→右（デフォルト）*/
  /* flex-direction: row-reverse;    右→左 */
  /* flex-direction: column;         上→下 */
  /* flex-direction: column-reverse; 下→上 */
}

配置の制御

Flexboxには2本の軸があります：

主軸（Main Axis）: flex-directionで決まる方向
交差軸（Cross Axis）: 主軸に垂直な方向

.container {
  display: flex;

  /* 主軸方向の配置（justify-content） */
  justify-content: flex-start;    /* 左揃え（デフォルト）*/
  /* justify-content: flex-end;      右揃え */
  /* justify-content: center;        中央揃え */
  /* justify-content: space-between; 両端揃え、等間隔 */
  /* justify-content: space-around;  要素の周りに等間隔 */
  /* justify-content: space-evenly;  全て等間隔 */

  /* 交差軸方向の配置（align-items） */
  align-items: stretch;           /* 交差軸いっぱいに伸びる（デフォルト）*/
  /* align-items: flex-start;        上揃え */
  /* align-items: flex-end;          下揃え */
  /* align-items: center;            中央揃え */
}

完全中央揃え（よく使う！）

/* 横も縦も中央に揃える */
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh; /* 画面の高さいっぱい */
}

これは超頻出パターンです。モーダル、ローディング表示、ヒーローセクションなど、あちこちで使います。

折り返し（wrap）

.container {
  display: flex;
  flex-wrap: wrap;    /* 折り返しあり（デフォルトはnowrap） */
  gap: 16px;          /* アイテム間の余白 */
}

Flexアイテムの制御

.item {
  flex: 1;            /* 利用可能なスペースを均等に配分 */
  /* flex: 2; で2倍のスペースを取る */

  flex-grow: 1;       /* 拡大率 */
  flex-shrink: 1;     /* 縮小率 */
  flex-basis: 200px;  /* 基本サイズ */

  /* 個別の交差軸配置 */
  align-self: center;
}

実用例：レスポンシブカードリスト

.card-list {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.card {
  flex: 1 1 300px; /* 最小300px、余白があれば伸びる */
  background: #fff;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

<div class="card-list">
  <div class="card">カード1</div>
  <div class="card">カード2</div>
  <div class="card">カード3</div>
  <div class="card">カード4</div>
</div>

flex: 1 1 300pxは「最低300px確保して、余白があれば伸ばす」という意味です。画面幅によって1列〜複数列が自動で切り替わる、シンプルなレスポンシブレイアウトが実現できます。

レイアウトデザインのイメージ

CSS Gridをマスターする

基本の設定

.container {
  display: grid;

  /* 列の定義 */
  grid-template-columns: 200px 1fr 200px;
  /* 左200px・中央可変・右200px の3列 */

  /* 行の定義 */
  grid-template-rows: 80px 1fr 60px;

  /* セル間の余白 */
  gap: 20px;
  column-gap: 20px; /* 列間のみ */
  row-gap: 16px;    /* 行間のみ */
}

frという単位

Gridのfr（fraction）は「残りのスペースの割合」を表す単位です：

/* 1:2:1 の3列 */
grid-template-columns: 1fr 2fr 1fr;

/* 全て均等の3列 */
grid-template-columns: 1fr 1fr 1fr;
/* 短縮形 */
grid-template-columns: repeat(3, 1fr);

/* 繰り返し（4列均等） */
grid-template-columns: repeat(4, 1fr);

よく使うパターン

聖杯レイアウト（ヘッダー・サイドバー・メイン・フッター）

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

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

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

grid-template-areasで「見た目通り」にレイアウトを定義できるのがGridの強みです。コードを読むだけでページ構造がわかります。

レスポンシブギャラリー

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

auto-fillとminmax(200px, 1fr)の組み合わせは強力です。最小200pxを確保しつつ、画面幅に応じて自動的に列数が変わります。メディアクエリなしでレスポンシブが実現できます。

アイテムの配置指定

.item {
  /* 列方向の配置 */
  grid-column: 1 / 3;     /* 1列目から3列目の前まで（2列分） */
  grid-column: span 2;    /* 2列分を占有 */

  /* 行方向の配置 */
  grid-row: 1 / 3;        /* 1行目から3行目の前まで */

  /* grid-areaで一括指定 */
  grid-area: 1 / 1 / 3 / 3; /* row-start / col-start / row-end / col-end */
}

FlexboxとGridの使い分け早見表

ユースケース	推奨	理由
ナビゲーションメニュー	Flexbox	1方向の横並び
カードリスト	どちらでも	Flexboxはwrap、Gridはgrid-template-columns
ページレイアウト	Grid	2次元レイアウトの定義が明快
ボタングループ	Flexbox	シンプルな横並び
写真ギャラリー	Grid	格子状配置が得意
中央揃え	Flexbox	justify-content+align-items一発
複雑なダッシュボード	Grid	grid-template-areasで可読性高

Tailwind CSSでの書き方

最近はユーティリティCSSのTailwind CSSを使うプロジェクトも増えています。Tailwindでは同じレイアウトをこう書きます：

<!-- Flexboxで横並び中央揃え -->
<div class="flex justify-center items-center gap-4">
  <div>アイテム1</div>
  <div>アイテム2</div>
</div>

<!-- Gridでレスポンシブ3列 -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
  <div>カード1</div>
  <div>カード2</div>
  <div>カード3</div>
</div>

クラス名がそのままFlexbox/Gridのプロパティに対応しているので、基礎を理解していればTailwindもすぐ使えます。

よくあるハマりポイント

Flexboxのよくあるミス

/* NG: Flexアイテムに直接displayを指定しても効かない */
.container {
  display: flex;
}
.container > div > span {
  flex: 1; /* 孫要素には効かない！ 直接の子要素だけ */
}

/* OK: ネストする場合は内側にもdisplay:flexを */
.container > div {
  display: flex;
}
.container > div > span {
  flex: 1;
}

Gridのよくあるミス

/* NG: grid-template-columnsに%を使うと期待通りにならないことがある */
.container {
  display: grid;
  grid-template-columns: 33% 33% 33%; /* gapが加わると合計が100%超える */
}

/* OK: frを使う */
.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px; /* frはgapを考慮してくれる */
}

まとめ

FlexboxとGridの要点を整理します：

Flexbox（1方向）:

display: flexでコンテナを作る
justify-contentで主軸方向の配置
align-itemsで交差軸方向の配置
flex-wrap: wrapで折り返し
中央揃えが簡単（justify-content: center + align-items: center）

Grid（2方向）:

display: gridでコンテナを作る
grid-template-columnsで列を定義（fr単位活用）
grid-template-areasで領域名でレイアウト定義
auto-fill + minmax()でメディアクエリなしレスポンシブ

大事なのは手を動かすことです。CSS Tricks の Flexbox ガイドや Grid のガイドはブックマーク必須の資料です。

CSSをある程度マスターしたら、ReactやTypeScriptと組み合わせてコンポーネント指向の開発に進みましょう。TypeScript入門の記事とポートフォリオ作成の記事も合わせてどうぞ。

また、HTML/CSSの基礎からポートフォリオ作成まで体系的に学びたい方は30日でポートフォリオを作る記事も参考になります。

まずはFlexboxのjustify-contentとalign-itemsだけでも今日から使ってみてください。これだけで「CSSが楽になった」と感じるはずです。

CSSを含むフロントエンド技術を体系的に学ぶなら、プログラミングスクールという選択肢もあります。実務レベルのコードレビューをもらいながら学ぶことで、独学の罠にはまらずに済みます。スクール比較記事も参考にしてみてください。

JavaScript入門の記事でJSの基礎を固めると、CSSアニメーションやインタラクションの実装で一気にできることが広がります。また、フロントエンド開発の文脈でNext.jsとReactの違いを理解しておくと、実務でのCSS戦略（CSS Modules vs Tailwind vs CSS-in-JSの選び方）もクリアになります。

よくある質問

Q: FlexboxとGridのどちらから先に覚えればいいですか？

A: Flexboxから始めることをおすすめします。ナビゲーションメニュー、カードの横並び、中央揃えなど、日常的なレイアウトの大半はFlexboxで対応できます。Gridはページ全体のレイアウトや複雑な格子状配置が得意で、Flexboxを使いこなせるようになってから学ぶとスムーズです。

Q: Tailwind CSSを使えばFlexbox/Gridを知らなくても大丈夫ですか？

A: 実際に開発する上では使えますが、トラブルが起きたときに原因を特定できません。Tailwindのクラスは純粋なCSS プロパティの別名なので、元のCSS仕様を理解していないと「なぜこのクラスで動くのか」が不明なまま進むことになります。基礎を理解してからTailwindを使うのが最短ルートです。

Q: `gap`プロパティはどのブラウザまで使えますか？

A: 2024年以降は主要ブラウザ（Chrome/Firefox/Safari/Edge）で問題なく使えます。以前はFlexboxのgapがSafariで使えない時期がありましたが、現在は解消されています。業務でIE対応が必要な案件は2026年時点ではほぼ存在しないので、安心して使ってください。

Q: CSSのレイアウトを練習するのにおすすめの方法は？

A: 好きなWebサイトを模写するのが一番効果的です。「このレイアウト、FlexboxかGridか」を考えながらDevToolsで検証し、自分で再現してみる。30日でポートフォリオを作る記事では、この模写→実装のサイクルを体系的に取り組む方法を解説しています。

Q: ReactでCSSを書く場合、通常のCSSとどう違いますか？

A: Flexbox/Gridの書き方自体は同じです。違いは「どこに書くか」で、CSS Modules（.module.cssファイル）、Styled-components（CSS-in-JS）、Tailwind CSSなど選択肢があります。React vs Vue.jsの比較記事でコンポーネント設計の考え方も触れているので参考にしてみてください。

【2026年4月追記】CSS Subgridが主要ブラウザで使えるようになりました。今まで「Gridの子要素の中でさらにGridを揃えたい」という場面で苦労していたケースが、grid-template-columns: subgrid一発で解決できます。特にカード内のコンテンツ（タイトル・本文・ボタン）を縦方向に揃えるレイアウトで効果的です。実務でのカード一覧ページに組み込んでみたところ、JavaScriptで高さ計算していたコードを丸ごと削除できました。

CSS FlexboxとGrid完全ガイド｜レイアウトをマスターして脱・初心者【2026年版】

FlexboxとGridの使い分け

Flexboxをマスターする

基本の設定

方向の制御

配置の制御

完全中央揃え（よく使う！）

折り返し（wrap）

Flexアイテムの制御

実用例：レスポンシブカードリスト

CSS Gridをマスターする

基本の設定

frという単位

よく使うパターン

聖杯レイアウト（ヘッダー・サイドバー・メイン・フッター）

レスポンシブギャラリー

アイテムの配置指定

FlexboxとGridの使い分け早見表

Tailwind CSSでの書き方

よくあるハマりポイント

Flexboxのよくあるミス

Gridのよくあるミス

まとめ

よくある質問

Q: FlexboxとGridのどちらから先に覚えればいいですか？

Q: Tailwind CSSを使えばFlexbox/Gridを知らなくても大丈夫ですか？

Q: `gap`プロパティはどのブラウザまで使えますか？

Q: CSSのレイアウトを練習するのにおすすめの方法は？

Q: ReactでCSSを書く場合、通常のCSSとどう違いますか？

あわせて読みたい

【買い切り型】Colosoでプロから学ぶ

CSS FlexboxとGrid完全ガイド｜レイアウトをマスターして脱・初心者【2026年版】

FlexboxとGridの使い分け

Flexboxをマスターする

基本の設定

方向の制御

配置の制御

完全中央揃え（よく使う！）

折り返し（wrap）

Flexアイテムの制御

実用例：レスポンシブカードリスト

CSS Gridをマスターする

基本の設定

frという単位

よく使うパターン

聖杯レイアウト（ヘッダー・サイドバー・メイン・フッター）

レスポンシブギャラリー

アイテムの配置指定

FlexboxとGridの使い分け早見表

Tailwind CSSでの書き方

よくあるハマりポイント

Flexboxのよくあるミス

Gridのよくあるミス

まとめ

よくある質問

Q: FlexboxとGridのどちらから先に覚えればいいですか？

Q: Tailwind CSSを使えばFlexbox/Gridを知らなくても大丈夫ですか？

Q: gapプロパティはどのブラウザまで使えますか？

Q: CSSのレイアウトを練習するのにおすすめの方法は？

Q: ReactでCSSを書く場合、通常のCSSとどう違いますか？

あわせて読みたい

【買い切り型】Colosoでプロから学ぶ

Q: `gap`プロパティはどのブラウザまで使えますか？