FlexboxとCSS Gridの違いと使い分け｜よくあるレイアウトで理解する

web兄さん

Flexboxの登場により、レイアウトにfloatを使うことはほぼなくなりました。

そして、CSS Gridの登場で「CSS Gridは次世代のレイアウトの主流になる」なんて記事も見かけます。

しかし、FlexboxとCSS Gridは明確に仕様が違います。

今までFlexboxで対応していた一部のレイアウトを、適切に実装できるCSS Gridに移行させていくという流れがこれからの在り方として正しそうです。

この記事では以下のことを学習していきます。

FlexboxとCSS Gridの違いがわかる
Webサイトの頻出レイアウトを例に、Flexbox・CSS Gridどちらを使うべきかわかる

Gridの基礎がそもそもわからないという方はまず初めにこちらを読んでみてください👍

FlexboxとCSS Gridのレイアウト早見表

CSS Gridが向いているレイアウト

Flexboxが向いているレイアウト

FlexboxとCSS Gridの最大の違い

FlexboxとCSS Gridを使って横並びにする時の実装の手順をデザインソフトで再現してみました。

flexが「とりあえず横並びにしてから子要素の幅や配置を決めていく」のに対して、

girdは「先にどのように配置するか線を設定して、区切られた領域に子要素を当てはめる」

という部分が最大の違いです。

Gridの場合、要素を配置したい幅分のライン（線）を引いてからアイテムを配置していますよね。

同じレイアウトで実装方法を比較

次は実際のコードを見ながら比較をしていきます。

<div class="parent">
  <div class="item _A">720px</div>
  <div class="item _B">360px</div>
</div>

HTMLは共通ですがCSSを見てみるとその違いがわかりやすいでしょう。

Flexboxの場合

/* 親 */
.container{
  display: flex;
}

/* 子 */
.item{
  height: 150px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.item._A{
  flex-basis: 720px;
}
.item._B{
  flex-basis: 360px;
}

CSS Gridの場合

/* 親 */
.container{
  display: grid;
  grid-template-columns: 720px 360px;
  grid-template-rows: 150px;
}

/* 子 */
.item{
  display: grid;
  place-items: center;
}

ここで見るべきポイントはコード量ではなく、「横幅と高さの指定を親（コンテナ）と子（アイテム）どちらに書いているか」です。

Flexbox → 子要素（アイテム）に横幅や高さの指定をしている
CSS Grid → 親要素に横幅や高さの指定をしている

となっています。

今度は2行になり、高さも150pxと200pxと要素が追加された場合を比較してみます。

<div class="parent">
  <div class="item _A">720px</div>
  <div class="item _B">360px</div>
  <div class="item _C">240px</div>
  <div class="item _D">840px</div>
</div>

Flexboxの場合

/* 親 */
.container{
  display: flex;
  flex-wrap: wrap;
}

/* 子 */
.item{
  height: 150px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.item._A{
  height: 150px;
  flex-basis: 720px;
}
.item._B{
  height: 150px;
  flex-basis: 360px;
}
.item._C{
  height: 200px;
  flex-basis: 240px;
}
.item._D{
  height: 200px;
  flex-basis: 840px;
}

CSS Gridの場合

/* 親 */
.container{
  display: grid;
  grid-template-columns: 240px 480px 360px;
  grid-template-rows: 150px 200px;
}

/* 子 */
.item{
  display: grid;
  place-items: center;
}
.item._A{
  grid-row: 1;
  grid-column: 1/3;
}
.item._B{
  grid-row: 1;
  grid-column: 3;
}
.item._C{
  grid-row: 2;
  grid-column: 1;
}
.item._D{
  grid-row: 2;
  grid-column: 2/4;
}

2行になるとその違いがかなり顕著に現れますね。

Flexboxは、追加した子に高さと横幅を設定しているのであまり変わっていませんが、CSS Gridは以下のように実装が複雑になっています。