card list alignement and positioning



  • Hi, I want to make a card list that displays images and action btns in the bottom ‘the code is below’, the problem I am geting is that because of the margines that I add to the card the allignement is no more correct, example for medium and up screens I want to get 4 cards in a row, but because of the margins I get only 3, and for the card actions, I want to display them in the bottom when the image size is not the same and if possible the image in the middle

    
    <template>
      <q-page class="q-px-sm q-py-sm">
        <div class="row">
          <q-card
            class="q-ma-sm col-xs-12 col-sm-6 col-md-3"
            v-for="(img, index) in imgs"
            :key="index"
            inline
          >
            <q-card-media>
              <img :src="img">
            </q-card-media>
            <q-card-actions align="center" class="q-mt-auto q-mb-none">
              <q-btn flat round color="red" icon="favorite"/>
              <q-btn flat round color="faded" icon="bookmark"/>
              <q-btn flat round color="primary" icon="share"/>
            </q-card-actions>
          </q-card>
        </div>
      </q-page>
    </template>
    
    <style>
    </style>
    
    <script>
    export default {
      name: "AlbumView",
      data() {
        return {
          imgs: [
            "http://lorempixel.com/400/200/",
            "http://lorempixel.com/300/200/",
            "http://lorempixel.com/400/400/",
            "http://lorempixel.com/400/200/",
            "http://lorempixel.com/300/200/",
            "http://lorempixel.com/400/400/",     ]
        };
      }
    };
    </script>
    

Log in to reply