皆さんこんにちは、末ちゃんです。

ちょっと前のニュースになりますが、ついにSafariもgapプロパティに対応するようになりました！
これでFlexboxレイアウトでもgapを使用することができるようになります。

CSS gap プロパティ

gapプロパティって？というかたも、grid-gapと聞けば大体の方がイメージが浮かぶのではないでしょうか。
grid-gapもgapに置き換えられましたが、IE対応などで後方互換を気にするためにgrid-gapを今も使ってらっしゃる方はいると思います。

https://developer.mozilla.org/ja/docs/Web/CSS/gap

実はあのGridレイアウトで便利だったgapプロパティを、Flexboxでも使用することができます。

そして唯一モダンブラウザで非対応だったSafariが、バージョン14.1から対応することになったことで、晴れてすべてのモダンブラウザで使用できるようになりました。

従来の書き方との比較

さて、どのくらい便利になったのか、従来の書き方と比較してみましょう。
今回実装するのは以下のデザインです。

今回使用するHTMLは以下のとおりです。

<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

従来のcss

.container {
  display: flex;
  flex-wrap: wrap;
  margin: -0.5rem -0.25rem;
  max-width: 500px;
}

.item {
  margin: 0.5rem 0.25rem;
  width: calc(33.3333% - 0.25rem * 2);
  height: 100px;
  background-color: teal;
}

従来の方法では、親要素にネガティブマージンを設けて、子要素にマージンを設けることで実現していました。
直感的ではなく、かつひとつの機能に対するコードをばらけて記述するため、良いコードとは言えません。

gapを使用したcss

.container {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 0.5rem;
  max-width: 500px;
}

.item {
  width: calc(33.3333% - 0.25rem * 2);
  height: 100px;
  background-color: teal;
}

gapを使用するとこのように、親要素でgapの設定を書くことができます。
子要素には何も記述する必要がないため、よりよいコードが書けるようになりました。

ちなみにGridレイアウトの場合

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem 0.5rem;
  max-width: 500px;
}

.item {
  height: 100px;
  background-color: teal;
}

Gridレイアウトを使用する場合は、幅や高さなどのコンテンツサイズの情報を親要素で指定することができます。

FlexboxとGridどう使い分ける？

幅や高さなどが定まっている場合は、Gridを使用した方が良いと思います。

例えばグロナビなど、テキスト量に応じてコンテナのサイズが変化する場合などは、Flexboxが優れていると言えます。

まとめ

今時のWeb事情に合わせて新しい機能がどんどん追加されていっています。

完全に時が止まっているIE11に未だに対応しなければならない現場が残存するのが現実ですが、モダンブラウザのみが相手であれば、どんどん今時の便利な技術を使っていきたいものです。