Html CSS卡灵活的行行为

我目前正在尝试在不使用语义UI的情况下创建此效果。 链接到代码笔：

卡片1
卡片2
卡片3
卡片4
卡片5
卡片6

正如您在这里看到的，您只需要设置“UIFourCards stackable”类，然后就可以添加任意多的卡片div，最多一行4张卡片。当达到某个较小的尺寸时，它会跳成一行

在我的应用程序中，用户可以添加他想要的任意多张卡，这不可能为每4张卡创建行

我如何在纯CSS的帮助下有效地做到这一点？ 目前我正在进入CSS网格，也许这可以帮助我

---

谢谢大家!

下面是一个使用CSS网格的简单CSS版本：

.container{
显示：网格；
网格模板列：重复（自动填充，20%）；
证明内容：之间的空间；
栅隙：20px；
填充：20px；
宽度：90%；
保证金：0自动；
背景颜色：灰色；
}
.卡片{
背景色：白烟；
}
@介质（最大宽度：500px）{
.集装箱{
网格模板列：1fr；
}
}

卡片1
卡片2
卡片3
卡片4
卡片5
卡片6

请检查并评论我的答案，如果有不清楚或遗漏的地方，请告诉我。如果没有，那么如果你能接受对你帮助最大的答案就太好了。当用户利用自己的空闲时间帮助你时，你至少能做的就是回应，因为你选择不回应，所以我删除了我的答案。

<div class="ui container">
  <div class="ui four cards stackable">
   <div class="teal card">Card1</div>
   <div class="teal card">Card2</div>
   <div class="teal card">Card3</div>
   <div class="teal card">Card4</div>
   <div class="teal card">Card5</div>
   <div class="teal card">Card6</div>
 </div>
</div>