[CSS] gapって使っていいの？

ファンタラクティブのエンジニアの 太田 です。
InternetExplorerのサポートが終了した現在、cssでflexboxを使わない理由はなくなったと思います。
flexboxでgapを使うべきか考えました。
(gridではいくらでも使えばいいと思ってます。)

gapとは

要素間の余白を定義するプロパティです。

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

gapのメリット

• 要素間が同じ余白のサイズであれば、親要素にgapを指定するだけで、要素間の複数のmarginを書かなくてよくなる。
• カラム落ちの余白を気にしなくていい

gapを使うべきパターン

カラム落ちを考慮する必要があるレイアウト

横並びで1行の要素数が画面サイズによって決まるようなレイアウトではgapを使うことを検討できます。
marginを使用した場合はきれいに並べようとすると非常に複雑な計算が必要となり、状況によっては実現不可能な場合もあります。
gapを使えばとてもシンプルです。
以下の例ではx軸の余白のみに焦点を当てていますが、Y軸の余白についてもgapを使用したほうがシンプルになります。

gapを使用した場合

margin-leftを使用した場合

margin-rightを使用した場合

等間隔に並べることを意識したレイアウト

複数の要素を等間隔に並べることを意識してデザインされているコンポーネントにはgapを使用するといいと思います。
必ずしもそうではありませんが、同一の要素が複数並ぶこと、要素数が動的であることが多い印象を受けます。

gapを使わないほうがいいパターン

等間隔に並べることを意識していないレイアウト

デザインで反復が意識されたり、デザイントークンを定義した実装により、要素間の余白が同じサイズになることは多いと思います。
しかしそれらの要素は、上記の等間隔に並べることを意識したレイアウトと比較するとたまたま等間隔で並んでいるだけの要素であるように感じます。
等間隔に並べることを意識してデザインされていないので、少しデザインを変更しただけで等間隔ではなくなる可能性があります。
そのような要素にgapを使用すると、1つの要素間でも余白が変更されるとすべての要素間のスタイルの修正、もしくは不必要なdivで囲むなどが必要になります。
だれかがメリハリがないからちょっとここの余白大きくしてって言ったら渋々修正するはめになるかもしれません。
このようなレイアウトではgapは使用せずmarginを使用するのがよいのではと思いました。

あとがき

今回はgapを使わないほうがいいパターンをあげましたが、正直どっちでもいいと思っています。
gapが使えるなら使えばよくてデザインが変わって使えなくなったら直せばいいと思っています。
ただgapの使い所を見極めることで修正コストが減るといいなと思います。