Q-card column not distributing equally

  • Hi, i tried to use q-card in my v-for loop, i want my card to display 4 cards per row, but its not working. I dont see any errors on my code, and i tried this in bootstrap and its working


    here is my full component of ramen code :

    <div class="q-mt-md q-mx-sm">
     <div class="row">
       <q-badge transparent align="middle" color="amber-3">
         <span class="text-h5 text-black">Ramen</span>
     <div class="q-pa-md row q-gutter-sm">
         v-for="(item,index) in items"
         class="q-ma-md text-black col-xs-12 col-md-4 col-lg-3"
           <div class="text-h6">{{item.title}}</div>
         <q-separator inset />
         <img :src="item.img" height="350px" />
         <q-separator class="q-my-md" inset />
         <q-card-section class="align-right">PHP {{item.price}}</q-card-section>

  • @jarvilito remove the gutters (docs states it adds margins), also remove your card margin classes, wrap your q-cards inside a div instead and give it a padding.
    like this https://codepen.io/metalsadman/pen/eYmgLmy?&editable=true&editors=111

  • @metalsadman Thanks metal man! It works

Log in to reply