Группировка элементов, выполненная в css, которая изменяет количество элементов, сгруппированных на основе точки останова.

Question

У меня есть несколько элементов, которые я хочу сгруппировать по точкам останова, например:

• large: 4
• medium: 3
• small:2

Между каждой группой строк есть пространство сверху (см. Синюю рамку).

В этот момент я делю разбиение в бэкэнде, но в бэкэнде я не делаюзнать точку останова, нужно иметь несколько готовых точек останова, сложнее изменить.У меня сейчас есть две готовые группы.

Можно сделать это (группировать) в css вместо бэкенда и сохранить пространство между строками группы?

.group {
    align-items: flex-start;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    margin-top: 20px;
    border: 1px solid blue;
}
.group:first-child { margin: 0; }
.group:last-child { margin-bottom: 50px; }

.group .item { 
  border: 1px solid red;

}

.group-4 .item { 
  width:100%/4;
}

<div class="group group-4 group-3-md group-2-sm">
  <div class="item">
     <a class="button" href="components">Element1</a>
  </div>
  <div class="item">
     <a class="button" href="components">Element2</a>
  </div>
  <div class="item">
     <a class="button" href="components">Element3</a>
  </div>
  <div class="item">
     <a class="button" href="components">Element4</a>
  </div>
</div>
<div class="group group-4 group-3-md group-2-sm">
  <div class="item">
     <a class="button" href="components">Element1</a>
  </div>
  <div class="item">
     <a class="button" href="components">Element2</a>
  </div>
  <div class="item">
     <a class="button" href="components">Element3</a>
  </div>
  <div class="item">
     <a class="button" href="components">Element4</a>
  </div>
</div>