【初心者向け】CSSのレイアウト方法を徹底比較！FlexboxとGridの違いと使い方まとめ

1.はじめに：CSSで「要素を並べる」って難しい？
2.Flexboxとは？一列に並べたいならこれ！
3.Gridとは？2次元で配置したいならこれ！
- 💡 基本の使い方
- 📝 よく使うプロパティまとめ
4.FlexとGridの使い分けはどうする？
5.まとめ

1.はじめに：CSSで「要素を並べる」って難しい？

「ボタンを横並びにしたいのに、うまく並ばない…」
「画像と文字をキレイに整列させたい…でもバラバラになる！」

HTMLとCSSを勉強し始めた初心者がよくつまずくポイントが、「要素の並べ方」＝レイアウトです。

そんな悩みを解決してくれるのが、CSSのレイアウト手法である
**「Flexbox（フレックスボックス）」と「Grid（グリッド）」**の2つ。

この2つを使いこなせるようになると、ボタンの整列、カードデザイン、ページ全体の配置など、
あらゆるWebデザインがグッと簡単にキレイに作れるようになります！

この記事では、以下のような内容をやさしく解説していきます。

FlexboxとGrid、それぞれの特徴
基本の書き方とコード例
どっちを使えばいい？迷ったときの判断基準

「CSSで思ったように配置できない！」という人は、ぜひ参考にしてみてくださいね！

2.Flexboxとは？一列に並べたいならこれ！

Flexbox（フレックスボックス）は、要素を横や縦にきれいに並べるためのCSSのレイアウト方法です。
要素の幅がバラバラでも、中央揃え・等間隔配置・並び順の調整などが簡単にできるのが魅力。

特に「ボタンを横一列に並べたい」「上下中央に配置したい」といったレイアウトで大活躍します。

💡 基本の使い方

以下のように、親要素に display: flex; を指定することで、子要素が自動的に横並びになります。

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

<style>
  .flex-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #f0f0f0;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 8px;
    margin-bottom: 20px;
  }

  .flex-container div {
    background: #4caf50;
    color: white;
    padding: 12px 24px;
    font-size: 16px;
    font-weight: bold;
    border-radius: 6px;
  }
</style>

上のように、ボックスが横に並び、両端と中央にきれいに配置されているのがわかります。
これがjustify-content: space-betweenとalign-items: centerの効果です。

📝 よく使うプロパティまとめ

プロパティ	効果
`display: flex`	Flexboxを有効にする
`justify-content`	横方向の配置（左・中央・右・等間隔など）
`align-items`	縦方向の揃え方（上・中央・下）
`flex-direction`	並び方向を変更（横 row / 縦 column）

✅ よくある使いどころ

ボタンの横並び
ヘッダーのナビゲーションメニュー
画像とテキストの中央揃え

Flexboxは**「1方向の並べ方」に特化した、シンプルで使いやすいレイアウト方法**です。
次に紹介するGridと組み合わせることで、さらに自由度の高いデザインが可能になります！

3.Gridとは？2次元で配置したいならこれ！

CSS Grid（グリッド）は、縦と横の2方向で要素を整列できるレイアウト方法です。
Flexboxが「横並び or 縦並びの1方向」なのに対して、Gridは複雑なマス目状の配置が得意です。

カードレイアウト、ギャラリー、ダッシュボード風の画面など、全体の構成をしっかり決めたいときにぴったりです。

💡 基本の使い方

<div class="grid-container">
  <div>A</div>
  <div>B</div>
  <div>C</div>
</div>

<style>
  .grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
    background: #f9f9f9;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 8px;
    margin-bottom: 20px;
  }

  .grid-container div {
    background: #2196f3;
    color: white;
    padding: 16px;
    font-size: 16px;
    text-align: center;
    font-weight: bold;
    border-radius: 6px;
  }
</style>

このコードでは、要素が横に3つ並び、各列の幅は同じ（1fr）になります。
gapは要素同士の間隔を設定するプロパティです。

Gridでは、A〜Cの要素がマス目状に等間隔で配置されているのがわかります。
これがgrid-template-columnsとgapの効果です！

📝 よく使うプロパティまとめ

プロパティ	意味
`display: grid`	Gridレイアウトを有効にする
`grid-template-columns`	列の幅を指定（1fr＝等分）
`gap`	要素同士の間隔を設定（縦横両方に効く）

4.FlexとGridの使い分けはどうする？

FlexboxとGrid、どちらも便利だけど「結局どっちを使えばいいの？」と思ったことはありませんか？
実は、それぞれに得意な場面があります。

✅ 比較表でざっくり理解しよう

比較項目	Flexbox	Grid
配置方向	1方向（横 or 縦）	2方向（縦・横のマス目）
要素数の柔軟さ	要素数が変わっても対応しやすい	事前に列数や行数を決めておくと安定
複雑なレイアウト	やや苦手（ネストが必要になる）	得意（見通しよく設計できる）
中央揃えのしやすさ	簡単（`justify-content`, `align-items`）	少し工夫が必要（`place-items`など）
学びやすさ	初心者向け（シンプル）	中級者向け（ルールが多い）