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

    aecef13a-ac7c-4d14-acf3-9b24c7d05812-image.png

    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>


  • @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