'Items not aligning properly in vue

I am using vue with vuetify library to create a page. On the page I have cards which can be of any numbers which I want to display. I am using a loop to display all cards. But the alignment is having an issue. All the cards are coming in one whole row. It is ok if the cards are just a few. The alignment looks fine then. But if the cards are more like around 10 the page looks off.

Image of the layout 

<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>
vue.jslayoutalignmentvuetify.js


Solution 1:[1]

You should add the class flex-wrap so that items continue in a new line rather than overflowing.

// (...)
<div class="d-flex justify-center flex-wrap mb-6 mt-10">
// (...)

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 sebasaenz

Related Questions