gapを使うと面倒な余白調整がすごく楽になるのでおすすめ。

余白調整といえば、paddingとmarginですが、「gap」を使えば楽に調整できます。

※ただし、display: flex;、もしくは、display: grid;を使っている場合のみ有効なcssです。

実際に使ってみます。

gapを使った余白調整

gapを使うとcssを1行加えるだけで余白調整ができます。

See the Pen gapで余白調整 by YT (@YT-the-scripter) on CodePen.

display: flex;に対して、下記のgapプロパティを加えるだけで縦横の調整ができます。

下記の例では、20pxの縦余白と、10pxの横余白を付けています。

  gap: 20px 10px;

marginで調整してた時に考慮しなければならない余分な調整が不要です。

marginで調整すると面倒

比較用に、marginで調整してみます。

See the Pen flexboxの余白 by YT (@YT-the-scripter) on CodePen.

.box {
  width: 100px;
  height: 100px;
  display: flex;
  background-color: orange;
  margin-right: 10px;
  margin-bottom: 10px;
}

.box:nth-child(3n) {
  margin-right: 0;
}

.box:nth-last-child(1),
.box:nth-last-child(2),
.box:nth-last-child(3){
  margin-bottom: 0;
}

marginで余白調整をすると、

・左側の要素と、最後の三つの要素だけmarginを除外するという手間が発生します。

これは面倒くさい….

まとめ

gapを使えばflexboxなどでの、余白調整が簡単になることを説明しました。

不要なcssが増えると、レイアウト崩れの原因にもなります。

是非シンプルに実装できるgapを使ってみてください。