Css 大小相等的儿童div

我有一个5或6的产品列表（取决于相关产品） 我希望前两个产品（views-row-1和views-row-2）始终位于第一行，但其余的产品将填充第二行的宽度

e、 g

[----产品1------][----产品2------]
[---产品3--][---产品4--][----产品5--]

或

[----产品1------][----产品2------]
[产品三][产品四][产品五][产品六]

我不能将它们分为两组，但每种产品都有自己独特的类别。我可以创建任意数量的包装器div

<div class="views-row-1">
<div class="views-row-2">
<div class="views-row-3">
<div class="views-row-4">
<div class="views-row-5">

我使用的是引导框架，这是在Drupal中构建的

如何使用CSS实现这一点？

---

（如果可能）

只需使用Flexbox即可：

.container{
显示器：flex；
柔性包装：包装；
边缘底部：10px；
}
.container>div{
高度：50px；
边框：1px实心；
框大小：边框框；
背景：红色；
柔性生长：1；
文本对齐：居中；
}
.容器>分区：第n个子项（1），
.container>div:n子级（2）{
宽度：50%；
}

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

根据您使用的引导框架，通常会提供一些预先制作的类，让您将Web设计的部分划分为行，这些行可以划分为列，在宽度上等分（还有响应性的额外好处）

---

通过这种方式，您可以定义一行总宽度为12，其中两个6元素覆盖整个宽度，子列（在本例中）为4，每个子列覆盖1/3。

您不需要为此任务添加CSS。开箱即用的引导程序会起作用，但他不能分成两组。

    <div class="col-6">
    </div>
    <div class="col-6">

    <div class="row">
        <div class="col-md-4">
        </div>
        <div class="col-md-4">
        </div>
        <div class="col-md-4">
        </div>
    </div>