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 last edited by dobbel
If you create a codepen demo we can help you better.
beets last edited by 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
<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.
beets last edited by
@Clyde Glad that solved it. Keep in mind the
q-col-gutter-*class is when you use
col-4, etc while
q-gutter-*is when you use
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.