Flexbox

column-gap

CSS
.container {
  display: flex;
  column-gap: 20px;
}
Box-1
Box-2
Box-3
Box-4
Box-5
Box-6
Box-7
Box-8
Box-9

row-gap

CSS
.container {
  display: flex;
  flex-wrap: wrap;
  row-gap: 20px;
}
Box-1
Box-2
Box-3
Box-4
Box-5
Box-6
Box-7
Box-8
Box-9

column-gap and row-gap

CSS
.container {
  display: flex;
  flex-wrap: wrap;
  column-gap: 20px;
  row-gap: 20px;
}
Box-1
Box-2
Box-3
Box-4
Box-5
Box-6
Box-7
Box-8
Box-9

gap (both row and column)

CSS
.container {
  display: flex;
  flex-wrap: wrap;
  // row, column
  gap: 40px 20px;
}
Box-1
Box-2
Box-3
Box-4
Box-5
Box-6
Box-7
Box-8
Box-9
CSS
.container {
  display: flex;
  flex-wrap: wrap;
  // row and column
  gap: 40px;
}
Box-1
Box-2
Box-3
Box-4
Box-5
Box-6
Box-7
Box-8
Box-9