CSS Grid vs Flexbox｜どっちを使う？使い分けと実戦レイアウト

使い分けの基準

CSS Gridが輝く瞬間

カード型のリストで、中身の文章量にかかわらず「枠の高さ」を揃えつつ、画面幅に応じて列数を動的に変えたいときはGridが圧倒的に楽です。

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

共存させるのが正解

Gridの中にFlexboxを置く、あるいはその逆も全く問題ありません。例えば、サイト全体のレイアウト（ヘッダー、メイン、サイドバー）をGridで組み、ヘッダー内のメニュー項目をFlexboxで並べるといった使い分けが、最もメンテナンス性が高くなります。

関連記事

この記事は フロントエンド・CSS テーマの一環です。あわせて読むと理解が深まる関連記事をまとめました。