<div class="flex">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
</div>

<div class="flex">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
  <div class="item">10</div>
</div>

/* decoration */
body {
  background: #ccc;
  padding: 1rem;
}

.item {
  border: 5px solid red;
  background: pink;
  color: black;
  font-size: 40px;
  text-align: center;
}

.flex {
  border: 4px solid green;
  margin-bottom: 1rem;
  background: white;
}

/* main */

/*
  gutter = 2rem
*/

.flex {
  display: flex;
  flex-wrap: wrap;
}

.item {
  box-sizing: border-box;
  /*
    1.5rem = 2rem * 3 / 4
    три промежутка нужно рапределеить между четырьмя элементами
  */
  width: calc(25% - 1.5rem);
  margin: 0 1rem; /* 1rem = 2rem / 2 */
  
  /* обнуление отступов у первых и последних элементов в строке */
  &:nth-child(4n + 1) { margin-left: 0; }
  &:nth-child(4n) { margin-right: 0; }
  /* отступ по вертикали */
  &:nth-child(n + 5) { margin-top: 2rem; }
}