Change grid columns in Vue

Question

I have an outer Vue template:

<template>
  <v-container fluid>
    <div>
      <v-row>
        <v-col md="4" class="pa-1" v-for="i in allComponents" :key="i.id">
          <gokb-reviews-title-card
            :id="i.id.toString()"
            @keys="addkeyFields"
          />
        </v-col>
      </v-row>
    </div>
  </v-container>
</template>

and an inner Vue template (gokb-reviews-title-card)

<template>
  <v-card class="elevation-4 flex d-flex flex-column" v-if="!!title?.name"> 
    <v-card-title primary-title>
      <h5 class="titlecard-headline">{{ title.name }}</h5>
    </v-card-title>

    <v-card-text class="flex" v-for="(i, count) in title.identifiers" :key="i.id">
      <div v-if="count == 0">{{ $tc('component.identifier.label', 2) }}</div>
      <div class="titlecard-ids" :class="i.namespace.value">{{ i.namespace.value }}: {{ i.value }}</div>
    </v-card-text>

    <v-card-text class="flex" v-if="!!title?.history">
      <div class="titlecard-history">{{ $t('component.title.history.label') }}</div>
      <div class="titlecard-history">{{ title.history }}</div>
    </v-card-text>
  </v-card>
</template>

The row consists of 3 gokb-reviews-title-cards. I want to have it 4 cards.

I've tried to change it by adding cols="3" to the v-col as discussed in this question. This did not show any effect.

Adding a CSS .grid to the outer-most <div> (discussed here) can change the width of a card, but the maximum number of cards per row stays 3. The row is "half-filled" then. The CSS I tried is:

.reviews-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
};

How can I make the <v-row> contain 4 <v-col>s thet each contain 1 card?

Answer 1

I think it is because you have md="4" in

 <v-col md="4" class="pa-1" v-for="i in allComponents" :key="i.id">

if you change it to 3 it should work since it's a 12-based grid

 <v-col md="3" class="pa-1" v-for="i in allComponents" :key="i.id">

in addition, your cols="3" might not be working because it only applies to widths narrower than the md breakpoint.

If you are using responsive layouts keep the md, but also define other widths, either through cols or xs. Otherwise just use cols