みなさんflex使ってますか？
簡単に横並びや段落ちとかするのに便利なflex!ですが
みなさん間隔はどうあけてますか？
僕はいままでは

.wrapper{
  display: flex;
  flex-wrap: wrap;
  width: 950px;
}

.item{
  width: 300px;
}

.item:not(:nth-of-type(3n+1)){
  margin-left: 25px;
}
.item:nth-of-type(n+4){
  margin-top: 25px;
}

ってこんな感じで、やってました。
親要素に、flex設定して、折返しあり
子要素の幅を指定して
子要素の３の倍数+1ではないものにmargin-leftを指定
夜要素の４個目からmargin-topに幅を指定
このように設定してました。
はい面倒です。
これにレスポンシブで指定する場合とかは３列から２列やら４列やらに対応しないとあかんのです。

まぁそれが一括で間隔を指定できるっていうのがgapです。
イメージとしてはこんな感じ？

中の要素がどんなであろうと、間隔の設定をしたら全部いっしょになるってのがgapってことで書き方をどぞ

// 全部の余白を50pxにしたい場合
.wrapper{
  display: flex;
  gap: 50px;
}

// 行間30px列間20pxにしたい場合
.wrapper{
  diplay: flex;

  // まとめて書く場合
  gap: 30px 20px;

  // 分けて書く場合
  row-gap: 30px;
  column-gap: 20px;
}

簡単！なんて簡単！
ブロックごとの間隔が、同じような場合とかも一気に指定できていいですよね。

<div class="text">
 <p>実はボーのかっか口がいをばかが見ひまたまし。するとしばらくいいかげんたますというポケットないた。まじめますないことだはたそれでは口の愉快たちの所をはそんなに変でしないて、そっちでもねこの座っられんですう。</p>

 <p>ぶっつけ過ぎそれは舌からうるさいたて一番のマッチの譜顔に云い第三赤ん坊館のかっこうを帰らてあげですた。先生は前いろてっまし。顔も一はいりゴーシュのようからなってまわった。</p>

 <p>狸はつけ日だりぼくを出しながらいで。ゴーシュは扉でしばらくとくぐて眼が狸のようにやっとゃくしゃしていましたがいつまでもつづけてへしがよし猫へとりているでし。まるでまるでむのくらいしかないのでが間で飛んなた。</p>

 <p>やつなるべくにぎてしまいはもうじぶんがをしておっかさんからききますたら。ゴーシュをけしたた。「裏が弾いた。ゴーシュ、おまえを天井。ぶっつけ。」</p>

 <p>誰は前のときのいきなり一生けん命のところへ飛ばしました。ゴーシュはねずみからご猫を行くて栗がさきをたってもう一生けん命睡っしたときを出たた。ぼうっと病気叫びて、なるてわらってくださいだながらかっこうがするとマッチへもちろん日上げまします。</p>
</div>


.test{
  display: flex;
  flex-direction: column;
  row-gap: 1.3rem;
}

これで、間があいた読みやすい文章になりますね。
ってことでgapをつかわないなんて、どうかしてるぜ！
ちなみにこのgapはgridでも使えます。
flexをgridにするだけです。