设置CSS网格系统以允许不同数量的项目

我正在尝试使用CSS和SASS设置网格系统，允许不同数量的项目在其容器中按比例间隔，请参见下图：

网格是4 x 2，你可以理解，所以我需要找到一种方法来跨越、填充或适合列和行，以填充空间，但因为我知道这对我来说是一个挑战，我有一个很差的结果，任何建议都将非常感谢

这是我的代码笔“代码”：

*{
字体系列：无衬线；
字体大小：14px；
颜色：白色；
}
.集装箱{
宽度：800px；
保证金：0自动；
}
.包装纸{
宽度：100%；
利润率：20px0；
显示：网格；
栅隙：10px；
网格模板行：适合内容（180px）；
网格模板列：重复（自动拟合，最小值（180px，2fr））；
}
.项目{
背景颜色：橙色；
高度：100px；
宽度：100%；
}

像这样的东西

.container{
宽度：300px；
保证金：0自动；
}
.包装纸{
边框：1px实心；
利润率：10px0；
填充：10px；
显示：网格；
栅隙：10px；
/*从4列开始，使其更容易*/
网格模板列：重复（4，1fr）；
}
.项目{
填充：10px；
字体大小：30px；
背景颜色：橙色；
格构柱：跨度2；
}
/*当只有3个元素时，跨越第一个元素*/
.项目：第n个孩子（3）{
网格行：跨度2；
}
/*当有4个元素（我们在上面选择的元素）时选择第二个元素，并将其保留为栅格跨度*/
.项目：第n个最后一个子项（4）+.项目{
网格行：跨度1；
}
/*当有5个元素时，跨越第一个元素*/
.项目：第n个孩子（5）{
网格行：跨度2；
}
/*当有5个图元时，重置其余图元的列跨度*/
.物品：第n个最后一个孩子（5）~div{
格构柱：跨度1；
}

1.
2.
3.
1.
2.
3.
4.
1.
2.
3.
4.
5.

网格模板列：repeat（4，1fr）

似乎是您需要的，是您想要的吗？@yousaf是的，但我希望重用代码，因为这些数据来自json文件，所以我想知道使用相同的CSS类是否可能？，我可以用JS来做，但是如果每次网格中的项目数量不同，网格布局本身也不同，那么要让它响应起来就有点麻烦了。你不能创建一个可重用的网格。如果布局保持不变，那么您可以创建一个网格布局，以适应网格中不同数量的项目。@Yousaf如果正确，那么我将根据该原则进行布局，谢谢大家的时间。似乎我试图实现的是不可能的，如果项目列表为6个或更多，CSS将无法工作，但这个答案确实解决了我的问题。