在CSS中完成的元素分组，可更改基于断点分组的元素数量

Question

我有很多要按断点分组的元素，例如：

• 大：4
• 中：3
• 小：2

在每组行之间，顶部有空格（请参见蓝色边框）。

此刻，我在后端进行拆分，但是在后端我不知道 断点，需要有多个预先创建的断点，很难更改。 我现在有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>