Images grid

[Clyde]

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>

[dobbel]

@Clyde

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

[beets]

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.

[Clyde]

@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

[beets]

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