Css flexbox图像网格，儿童有大有小，don'；我不想要任何死角

有一个盖茨比/满足的投资组合。在contentful中，每个公文包项都有一个布尔值“featured”，为true或false。如果该项目是特色，我希望它占100%的宽度。如果项目不是，我希望它是说33%的宽度。问题是我不想要死角。预期设置如下

这些项目是按时间顺序从contentful输入的，然后我使用

.map（）

将它们呈现到页面上。如果

featured===true

则添加一个“featured”类

是否有flexbox解决方案？尝试过收缩和增长，但无法实现，或者这是一个js排序算法问题

您可以使用网格（和）执行此操作

.container{
显示：网格；
网格：自动流/1fr 1fr；
栅隙：10px；
网格自动流动：稠密；
}
.卡片{
边框：4倍纯黑；
高度：150像素；
}
.特色{
网格柱：1/4；
}

---

另外，如果有人在读这篇文章，我忘记的术语是“砖石”。这非常有帮助：