How to vertically stretch elements in a table grid?

wpq

I am using a table in grid style to represent a set of monitoring events. I almost get what I want, except that the content of the element is shrinked vertically to its content. I would like it to take the whole height of the line:

The red anchored arrows show how I would like to stretch the elements.

I thought that items-stretch would be the solution but wherever I put it, it does not vertically stretch th eelements.

For reference, the code which builds the elements is below, I would be grateful for any help. I was trying to fit item-stretch in the line <div class="q-pa-xs col-grow col-lg-3 col-xs-12"> (effect on children) or <q-card :class="cardColor(props.row.isOK)"> (effect on each element individually)

<q-table
      grid
      :data="resultsToShow"
      :columns="columns"
      row-key="name"
      bordered
      :hide-pagination="true"
      :rows-per-page-options="[0]"
      :pagination.sync="pagination"
    >
      <template v-slot:item="props">
        <div class="q-pa-xs col-grow col-lg-3 col-xs-12">
          <q-card :class="cardColor(props.row.isOK)">
            <q-card-section class="text-center">
              <strong>{{props.row.monitor}} → {{props.row.target}}</strong>
              <span v-if="!props.row.isOK"> ({{when(props.row.when)}})</span>
              <q-badge floating v-if="!props.row.isOK">{{props.row.counter}}</q-badge>
            </q-card-section>
            <div v-if="!props.row.isOK">
              <q-separator />
              <q-card-section>
                {{props.row.why}}
              </q-card-section>
            </div>
            <div v-else>
              <div class="text-center" v-if="props.row.extra !== ''">{{props.row.extra}}</div>
            </div>
          </q-card>
        </div>
      </template>
    </q-table>

metalsadman

@wpq that won’t do it, better take a look at the masonry example.

wpq

@metalsadman you mean that what I am trying to achieve is not doable at all? That would be sad

I actually started from the masonry version but I want to avoid the ragged look (just have identical elements on one line)

Or maybe that I should not go the table way, but just iterate over elements manually?

metalsadman

@wpq you still ran into the problem of empty spaces, should understand the layout section of the docs, and dig into masonry layouting. Probably check for components in the wild if there’s one that automates staggered grid items, without writing much css.