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

      <q-page class="q-px-sm q-py-sm">
        <div class="row">
            class="q-ma-sm col-xs-12 col-sm-6 col-md-3"
            v-for="(img, index) in imgs"
              <img :src="img">
            <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"/>
    export default {
      name: "AlbumView",
      data() {
        return {
          imgs: [
            "",     ]