Currently, I am using the Vue framework in combination with Vuetify library to develop a web page. The main issue I am facing is related to card alignment on the page. When there are only a few cards displayed, the alignment looks perfect but if the number of cards increases to around 10 or more, the layout starts to look distorted.
https://i.stack.imgur.com/NeHgo.png
<template>
<div class="d-flex justify-center mb-6 mt-10">
<v-card
class="mr-4 ml-4"
v-for="(cat, index) in cards"
:key="index"
outlined
>
<v-card-actions>
<v-btn @click="getdata(cat._id)" plain>
{{ cat.category }}
</v-btn>
</v-card-actions>
</v-card>
</div>