FlexboxよりGridを使う理由

先日、Grid First, Flex Thirdという記事を読んだ。要約すると「レイアウトを行う際は grid > block > flex の順で使うべき」という主張がなされている。

並びのレイアウトはFlexbox、格子状に区切ってどこに何を配置するかはGridを使う派だったのだが、Gridの有用性を再認識した。

Flexboxの使いづらいところ

Flexboxで要素を並べると子要素の幅を指定しても圧縮されてしまう。

<section class="layout">
  <div class="item"></div>
  <div class="item"></div>
  ...
</section>

.layout {
  display: flex;
  overflow-x: auto;
}

.item {
  width: 200px;
}

子要素の幅を維持するためには、flex-shrink: 0;という指定が必要になる。

.item {
  width: 200px;
  flex-shrink: 0;
}

Gridを使う

Gridを使うと、Flexboxのようなflex-shrinkの指定が不要になる。

.layout {
  display: grid;
  grid-auto-flow: column;
  overflow-x: auto;
}

まとめ

Flexboxが登場したとき、狂喜乱舞した思い出がある。そのため、「横並びの要素にはdisplay:flexを使う」という意識が強い。

しかし、現在はFlexboxを代替できるほどの機能を持ったGridが全主要ブラウザで利用できるようになった。もちろん横1列に収めて並べるレイアウトはFlexboxのほうが得意だし、レンダリングのコストもGridに比べて低い（誤差レベルだが）。一概に「FlexboxではなくGridを使え」とは言えないが、個人的には今後はGridを優先して使っていきたい。