Images grid



  • Hi, please advise me.
    I need to create a q-img grid (aspect ratio 1: 1), where there will always be three images on the line. I tried it as follows, but the images don’t stretch to the full width of the line (a large gap remains on the right). I’m probably missing something, but I have no idea what.

    <div class="q-gutter-xs row">
       <q-img
          v-for="(value, index) in images"
          v-bind:key="index"
          :src="value"
          :ratio="1"
          class="col-3"
       />
    </div>
    


  • @Clyde

    If you create a codepen demo we can help you better.



  • Agreed a pen would help, but you may just have to wrap the q-img in a div. Also notice the correct gutter class q-col-gutter-xs

    <div class="q-col-gutter-xs row">
       <div
          v-for="(value, index) in images"
          v-bind:key="index"
          class="col-4"
       >
          <q-img
            :src="value"
            :ratio="1"
            />
       </div>
    </div>
    

    Edit: also, you want col-4 for three columns. That was likely the error in combination with the wrong gutter class, so you may not even need the extra div, although it doesn’t hurt.



  • @beets Thank you! The issue was in incorrect use of the gutter class. I’m a fool, I missed it. Wrapping the q-img in a div it was not necessary. And of course the width of the column was bad for the three elements, but I saw that immediately after repairing the gutter.

    Thanks again 👍



  • @Clyde Glad that solved it. Keep in mind the q-col-gutter-* class is when you use col-12, col-4, etc while q-gutter-* is when you use col and col-auto. It’s tripped me up before when I’ve copied / pasted code from other parts of my application and forgot to change it.


Log in to reply