Javascript 如何让浮动项目平均分割空白区域？

请运行此演示：

.app{
背景：粉红色；
宽度：90vw；
溢出：隐藏；
}
.app\u项目{
背景：浅蓝色；
宽度：200px；
浮动：左；
保证金：5px；
高度：40px；
}
.app\u项目：最后一个孩子{
浮动：对；
}
.app__项目--大小2{
高度：90px；
}

1.
2.
3.
4.
5.
6.
7.
8.
9
10
搜索

如果我理解正确，您希望“单元格1”右侧的单元格拉伸，以填充封闭div的铰孔水平空间（粉红色背景）

您可以使用来实现此目的，如下所示：

.app{
背景：粉红色；
宽度：90vw；
填充物：5px；
显示：网格；
/*使第一列为200px，其余两列为
缩放以适应剩余宽度*/
网格模板列：200px重复（2，1fr）；
/*设置单元格之间的间距*/
栅隙：10px；
}
.app\u项目{
背景：浅蓝色；
宽度：100%；
高度：40px；
} 
.app__项目--大小2{
/*使左上角单元格占据两行*/
网格行：1/3；
身高：100%；
}

1.
2.
3.
4.
5.
6.
7.
8.
9
10
搜索

感谢@Dacre Denny给了我灵感。终于，我明白了

.app{
背景：粉红色；
宽度：90vw；
填充物：5px；
显示：网格；
网格模板列：重复（自动拟合，200px）；
对正内容：空间均匀；
网格间距：5px；
}
.app__项目{
背景：浅蓝色；
宽度：200px；
高度：40px；
} 
.app__项目--大小2{
/*使左上角单元格占据两行*/
网格行：1/3；
身高：100%；
}
.app\u项目：最后一个孩子{
网格柱端：-1
}

1.
2.
3.
4.
5.
6.
7.
8.
9
10
搜索

为什么被否决？请告诉我，这样我可以改进这个问题。