FlexboxとGridの基礎｜レスポンシブレイアウトを理解する

Webページのレイアウトを柔軟に構築するためには、**Flexbox（フレックスボックス）とGrid（グリッドレイアウト）**の理解が欠かせません。どちらもCSSによって提供される強力なレイアウト技術で、それぞれに得意分野があります。本記事では、両者の基本的な考え方と使い分け、レスポンシブデザインとの関係をやさしくまとめます。

レイアウトを扱う前に、CSSのサイズ指定や**余白設定（margin・padding）**の理解があるとよりスムーズに習得できます。詳しくは以下も参考にすると理解が深まります。

• 内部リンク：
  CSSでサイズ指定を理解する｜px・em・remの違い
  CSSのmarginとpaddingの違いを徹底比較｜余白設定のコツ

1. Flexboxとは

Flexbox（Flexible Box Layout）は、1方向（1次元）のレイアウトを得意とする仕組みです。
横並び、縦並び、要素の間隔調整、中央寄せなどを柔軟に行えます。

特徴

• 横方向または縦方向の並び替えに強い
• 要素の位置調整が簡単
• 均等配置や中央揃えがしやすい
• コンテンツの量に応じて自動調整される

よく使うプロパティ

.container {
  display: flex;
  justify-content: space-between; /* 水平方向の揃え */
  align-items: center;           /* 垂直方向の揃え */
}

Flexboxが向いている場面

• ナビゲーションメニュー
• ボタンの横並び
• カードを横方向に並べるレイアウト
• ヘッダーやフッターの中央揃え

2. Gridとは

Grid Layoutは、縦と横の両方向（2次元）のレイアウトを得意とします。
列幅、行幅、配置位置を明確に指定できるため、複雑なレイアウトでも構造化しやすい点が特徴です。

特徴

• 2次元のレイアウトを自由に設計できる
• 明確な「行」と「列」を定義できる
• 複雑なページ構造でも管理しやすい
• 余白や比率調整がしやすい

よく使うプロパティ

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr; /* 3カラム */
  gap: 16px; /* 要素間の余白 */
}

Gridが向いている場面

• カード一覧のレイアウト
• ページ全体の枠組み（ヘッダー・サイドバー・メインなど）
• 写真ギャラリー
• 比率を揃えたいグリッド表示

3. FlexboxとGridの使い分け

大まかな目安としては、横一列か縦一列ならFlexbox、複数方向に並べるならGridと考えると分かりやすいです。

4. レスポンシブレイアウトとの関係

Flexbox・Gridは、ともにレスポンシブデザインと相性の良い仕組みです。

Flexbox × レスポンシブ

• 要素が自動的に伸縮するため、画面幅に合わせた調整がしやすい
• flex-wrap: wrap; を使うと段組みも自動化できる

Grid × レスポンシブ

• minmax() や auto-fit を使うことで、カードや画像が自動的に詰め込まれるレイアウトを作れる
• 特定の画面幅で行数・列数を切り替えられる

例：レスポンシブ対応のGrid

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

5. FlexboxとGridを併用するケース

実際のWebページでは、FlexboxとGridを組み合わせる構成が多く見られます。

例：

• ページ全体：Gridでレイアウト
• 項目ごとの並び：Flexboxで整える

両者は競合せず、むしろ補完関係にあります。

6. メディアクエリとの組み合わせ

レスポンシブ対応では、メディアクエリが欠かせません。
FlexboxやGridと併用することで、画面幅に応じた柔軟なレイアウトが可能です。

詳細な使い方は以下が参考になります。

• 内部リンク：
  CSSでメディアクエリを使う方法

まとめ

Flexboxは1次元レイアウト、Gridは2次元レイアウトに強く、それぞれに得意分野があります。Webページを柔軟に設計するためには、両方を適切に活用することが重要です。レスポンシブデザインとも密接に関係しているため、画面サイズに応じた表示調整にも役立ちます。

基礎を理解しておくことで、コードの可読性や保守性が高まるだけでなく、より効率的なWeb制作につながります。