基于项目数的CSS动态行布局

我想知道是否有办法使用CSS网格和/或Flexbox根据项目数量创建与以下类似的动态网格：

---

简单的回答是不，我不相信没有某种程度的javascript就可以实现这一点。也就是说，这里有一种方法可以用最少的脚本实现它

函数生成器框（大小）{
设str=“”，n=大小
而（--n>-1）{
str+=``
}
返回str
}
函数createLayout（i）{
让htmlOutput=“”
如果（i==1）htmlOutput=generateBoxes（1）
否则{
而（i>2&&i！=4）{
i-=3
htmlOutput+=生成框（3）
}
而（i>0）{
i-=2
htmlOutput+=生成框（2）
}
}
返回htmlOutput
}
document.querySelector（'button'）。addEventListener（'click'，e=>{
设i=document.querySelector（'input'）。值| | 0
document.getElementById（'output'）.innerHTML=createLayout（i）
})

#输出{
宽度：600px；
显示器：flex；
柔性包装：包装；
}
[数据大小]{
背景：灰色；
边框：1px纯白；
框大小：边框框；
高度：40px；
弹性收缩：0；
弹性基础：1；
}
[数据大小=“3”]{
弹性基准：33.333%；
}
[数据大小=“2”]{
弹性基准：50%；
}

输入多个框：开始

您的问题的答案可能是。但在这个网站上，我们自愿帮助您修复代码。我们不是从头开始编写代码（想象一下，如果是这样的话）。让我们看看你做了什么。