Display a component in a grid pattern. Vue.js - vue.js

Question

I have a card component that I would like to show in rows and columns, I haven't been able to figure it out, I would want to do it without using any dependencies if possible. I want a simple grid like 4 or 5 per row and adding a new row when necessary.
These components are to display the categories created by the user, the amount will change because on this page is where the user can create more, update them or delete the categories.
Right now I'm displaying them simply like this but they're all just one on top of the other
<div v-for="(category, index) in categories" :key="index">
<category_component :category="category" v-on:delete="confirmDelete" v-on:edit="editItem"/>
</div>
Is there a simple way to display them a certain number per row dynamically?
Edit:
I added some flex parameters as suggested like this
<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;
}
Now it is displaying in rows but is there a way to limit the amount per row? It's displaying 6 but they are really pushed together and then the row below they are far apart. Ignore the new button.