CSS GridとFlexboxはどう使い分ける？

HTMLの要素を横並びにするCSSといえば GridとFlexboxが代表的かと思います。

どちらを使っても見た目は同じにできるため、どちらかのみしか使わない人もいるかもしれません。

ですが、実装するデザインによって使い分けることができると、コードの量や保守性など、工数で違いが出てきます。

今回は、GridとFlexboxそれぞれ適しているパターンと使い分け方について説明します。

Geminiに聞いてみた

せっかくなのでAIさんにも聞いてみましょう。
今回はGoogle Geminiに聞いてみました。

ポイントは配置を制御したい次元の数だそうです。
イメージつきますか？

もう少し噛み砕いて、実際にどのようなコンポーネントで使うと良いか、
実装の体験も踏まえて解説します。

Gridが向いている場面は、
並べたい要素の横幅が均等であり、並べる個数（列の数）が決まっている場面が向いています。

弊社サービスのらくらく在庫機能ページような、カードを一覧で並べるレイアウトなどはGridを使うことをおすすめします。
※このページではGridで実装されていないのですが

特に、子要素間で余白を持たせたいときはGridを使うと実装も簡単なうえにレスポンシブ対応も非常に楽です。

実際のコードはこちら

.wrapper {
  display: grid;  //  gridの宣言
  grid-template-columns: repeat(4, 25%) // 子要素を25%の長さで1列4つ並べる
  gap: 15px 15px; // 子要素間の余白は上下左右それぞれ15px
}

レスポンシブ対応でタブレットで表示する場合は1列3要素で余白も調整したい、
という対応も親要素のgrid-template-columnsとgapを調整するだけですので、非常に楽です。

格子状の配置を実装するときはGridを使いましょう。

Gridはページ全体のレイアウトの実装にも有効です。
特に固定幅のサイドバーを持つページのレイアウトにおいて有効です。

ただし、ページ全体のレイアウトでGridを使う場合は、
grid-template-areasを用いての実装になり、grid-template-areasの解説だけで1記事分の分量になるため、今回は割愛します。

Flexboxは1次元（1列もしくは1行）のコンポーネントや、
子要素の長さや並べる要素数が柔軟に変わるデザインに向いています。

横並びのナビゲーションメニューは子要素の長さ＝文字数で変わりますので、柔軟に対応できるFlexboxが向いています。

実際のコードはこちら

.menu-wrapper {
  display: flex;  // Flexboxの宣言
  justify-content: flex-end;  //  要素の並べ方、今回は右側基準で並べる
  gap: 15px;  // 子要素間の余白
}

意外と知られていないのですが、Flexboxでもgapプロパティで余白管理ができます。
子要素に余白を設定するとコード量が増える上に保守性も悪くなるので、
Flexboxの余白管理もgapを使いましょう。

Flexboxはパンくずリストの実装でも非常に力を発揮します。

パンくずリストはページによって、長さや並べる要素数が異なる上に、場合によっては折り返しも発生します。

こういった条件の実装はFlexboxで行いましょう。

規則正しく並べるならGrid、要素数や長さが柔軟な場合はFlexboxを使いましょう。

そして、要素間の余白はmarginではなくgapを使いましょう。

実装してみるとコード量が少なくなり工数が大きく変わります。