card list alignement and positioning

[Anahoua]

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>