gapとは

gap は css のプロパティで、アイテム同士の横方向と縦方向の余白をまとめて指定する事ができます。
marginプロパティーやpaddingプロパティーでも余白は指定できますが、gridやflexboxでgapプロパティーを使うと柔軟にレイアウトを組めます。

では、gapプロパティーを使用し縦10px、横20pxの余白を作ります。

下記、HTML、CSSコードです。

HTML

<div class="flex">
<div class="flex-item">flex</div>
<div class="flex-item">flex</div>
<div class="flex-item">flex</div>
<div class="flex-item">flex</div>
<div class="flex-item">flex</div>
<div class="flex-item">flex</div>
<div class="flex-item">flex</div>
<div class="flex-item">flex</div>
</div>
 

CSS

.flex {
  display: flex;
  flex-wrap:wrap;
  text-align: center;
  height: 200px;
  gap: 10px 20px;/*縦に10px,横に20pxの余白を指定*/
 
}

.flex-item {
 width: 20%;
 background-color: rgb(124, 162, 231);
}

以下、実装例になります。

See the Pen
Untitled by 林 (@hayashi-akina)
on CodePen.

上記のように、marginプロパティーやpaddingプロパティーを使用せず、簡単に余白を指定することが出来ました。
 

gap を使用するメリットは

marginプロパティーで余白を指定する場合、最初と最後の要素にも余白ができます。
その為、不要な余白だけを無くす場合、:not や:nth-child などの疑似クラスの指定が必要になります。
gap を使用すれば、不要な要素に余白はつきません。擬似クラスの指定をせずに済むので便利です。

また、gapプロパティは一括指定プロパティーなので、行間・列間を個別に指定する場合はそれぞれrow-gap、column-gapを使用してください。