Html 根据最大行数自动调整项目大小

我有一个小部件，可能包含不同数量的项目（它们是自动生成的），从1到12个项目。因此，我的初始设置是每行设置3个项目，因此最多有4行（12/3）：

ul{
列表样式类型：无；
边距：0；填充：0；
背景色：红色；
宽度：80%；
显示器：flex；
柔性包装：包装；
证明内容：周围的空间；
}
李{
背景颜色：黄色；
宽度：30%；
高度：20px；
边缘底部：10px；
}

您就快到了，只需添加flex grow属性并将宽度更改为min width

.grid{
显示器：flex；
柔性包装：包装；
}
.项目{
背景：红色；
柔性生长：1；
最小宽度：30%；
高度：20px；
保证金：5px；
}