vue.js - 以网格模式显示组件。Vue.js

Question

我有一个卡片组件，我想在行和列中显示，我无法弄清楚，如果可能的话，我想在不使用任何依赖项的情况下做到这一点。我想要一个简单的网格，比如每行 4 或 5 个，并在必要时添加一个新行。

这些组件用于显示用户创建的类别，数量会发生变化，因为在此页面上用户可以创建更多、更新或删除类别。

现在我只是像这样显示它们，但它们都只是一个在另一个之上

<div v-for="(category, index) in categories" :key="index">
    <category_component :category="category" v-on:delete="confirmDelete" v-on:edit="editItem"/>
</div>

有没有一种简单的方法可以动态地在每行显示一定数量？

编辑：我按照这样的建议添加了一些 flex 参数

<div class="category-container">
    <div v-for="(category, index) in categories" :key="index">
        <category_component :category="category"
            v-on:delete="confirmDelete" v-on:edit="editItem"/>
    </div>
</div>

.category-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

现在它按行显示，但有没有办法限制每行的数量？它显示 6，但它们确实被推到一起，然后它们下面的行相距甚远。忽略新按钮。