CSS GridとFlexboxの使い分け方

はじめに

CSSによるレイアウト実装では、Flexbox と Grid がよく使われます。どちらも強力な機能を持っていますが、それぞれ得意分野が異なります。この記事では、両者の特徴を整理し、実務での使い分け方を解説します。

Flexboxの特徴

• 一次元レイアウト（横方向か縦方向のどちらか）に強い
• 要素の整列や間隔調整が柔軟
• コンテンツのサイズに応じた自動調整が得意

実装例（ナビゲーションバー）

nav ul {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

→ ナビゲーション項目を横並びにし、中央揃えや両端揃えを簡単に実現可能。

Gridの特徴

• 二次元レイアウト（行と列の両方）に対応
• ページ全体の骨組みを定義するのに最適
• 明確なレイアウト設計が可能

実装例（カードレイアウト）

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

→ 自動でカラム数を調整し、レスポンシブなカード配置を実現。

使い分けの指針

• 要素の整列・分布 → Flexbox
• 全体のレイアウト構造 → Grid
• 実務では Gridで全体を組み、内部にFlexboxを使う ケースが多い

実践例：ブログ記事一覧

.blog-list {
  display: grid;
  grid-template-columns: 1fr 3fr;
}

.blog-list .meta {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

→ 記事全体のレイアウトをGridで定義し、詳細部分の整列をFlexboxで調整。

まとめ

• Flexboxは「小さな部品の並び」向け
• Gridは「全体の骨組み」向け
• 両方を組み合わせることで、保守性が高く柔軟なレスポンシブデザインを実現できる