【CSS】コンポーネント間のmarginよりgapを使えばよかったんや

marginのつらみ

既存のWEBサービスのリファクタリングとして、Atomic Designを適用していたところ、marginが面倒だなというのが気になってきました。

このようなコンポーネントを並べて、コンポーネント間に一定の幅の余白を持たせたいとします。

緑のコンポーネントの間のみ空白を入れたいのに、コンポーネント間だけに空白を入れようとすると個別に指定しないといけない・・・（最終の要素のみ、margin-rightがいらない）

ここの解決策としては以下のような対応が考えられます。

• 最後の要素以外にmargin-rightを入れる（↑のサンプルはこれで実装。一番微妙な実装）

<!-- 装飾スタイルは省いてます -->
<style>
  .container {
    display: flex;
  }
</style>

<div class="container">
  <div class="item" style="margin-right:20px"></div>
  <div class="item" style="margin-right:20px"></div>
  <div class="item"></div>
</div>

• 空のdiv要素をいれて空白を表現する

<!-- 装飾スタイルは省いてます -->
<style>
  .container {
    display: flex;
  }
  .blank {
    margin-left: 20px;
  }
</style>

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

• CSSでコンテナ要素でマイナスマージンを入れる

<!-- 装飾スタイルは省いてます -->
<style>
  .container {
    display: flex;
    margin-left: -20px;
  }

  .item {
    margin-left: 20px;
  }
</style>

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

とかとかが考えられるんですが、やりたいことはシンプルなのになんかちょっと微妙な実装だなと思うことがよくありました。

というわけで最近知ったのがgapというCSSプロパティーです。

gapなるもの

MDNによると、

The gap CSS property sets the gaps (gutters) between rows and columns. It is a shorthand for row-gap and column-gap.

ということで、行間や列間の隙間を表現できるプロパティです。

最初のサンプルをgapで書き換えてみます。

サンプルコード

<!-- 装飾スタイルは省いてます -->
<style>
  .container {
    display: flex;
    gap: 20px;
  }
</style>

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

めちゃくちゃスマート！
今回はflexの例ですが、gridレイアウトでも使えます。

サポート状況はどうなのか

でも新そうだからブラウザサポート微妙なんじゃないの？と思っていましたが
Chrome,Edge,Firefox,Safariなどなどの主要ブラウザではサポートされています。（IEはもう無視）

Safariやモバイルだと、Opera MobileやiOS Safariが一部Gridでcalc()と使う場合やマルチカラムで使う場合などに対応していないのでSpecificationは確認すると良いかと思います。

終わりに

というわけで、この方法を知ったのでmarginを使う機会が少し減りそうです。
Happy!🎉