在网格系统中组织可变的 col 大小

Question

在我的 vue/vuetify 应用程序中，我收集了两种尺寸的卡片，小（6 列）和大（12 列）。例如：

cards = [
    { cols: 6, text: 'Small card' },
    { cols: 12, text: 'Large card' },
    { cols: 6, text: 'Small card' },
    { cols: 12, text: 'Large card' },
    { cols: 6, text: 'Small card' },
];
        

如果我像这样遍历卡片：

<v-col v-for="card in cards" :cols="card.cols">
    <v-card>{{ card.text }}</v-card>
</v-col>

我会得到这样的布局：

相反，我的目标是组织卡片，使它们占据所有空间，如下所示：

一个解决方案可能是事先在我的脚本中创建一个有序列表，以正确的顺序放置卡片。但我想知道是否有更合适或更喜欢的 ui 框架方式来实现这一目标？