Q-card column not distributing equally

[jarvilito]

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 :

code_text
```<template>
<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>
   </q-badge>
 </div>
 <div class="q-pa-md row q-gutter-sm">
   <q-card
     v-for="(item,index) in items"
     :key="index"
     class="q-ma-md text-black col-xs-12 col-md-4 col-lg-3"
   >
     <q-card-section>
       <div class="text-h6">{{item.title}}</div>
     </q-card-section>
     <q-separator inset />

     <q-card-section>{{item.description}}</q-card-section>

     <img :src="item.img" height="350px" />

     <q-separator class="q-my-md" inset />

     <q-card-actions>
       <q-btn>View</q-btn>
     </q-card-actions>
     <q-card-section class="align-right">PHP {{item.price}}</q-card-section>
   </q-card>
 </div>
</div>
</template>

[metalsadman]

@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

[jarvilito]

@metalsadman Thanks metal man! It works