Change grid columns in Vue-CodePudding

I have an outer Vue template:

<template>
  <v-container fluid>
    <div>
      <v-row>
        <v-col md="4"  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  v-if="!!title?.name"> 
    <v-card-title primary-title>
      <h5 >{{ title.name }}</h5>
    </v-card-title>

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

    <v-card-text  v-if="!!title?.history">
      <div >{{ $t('component.title.history.label') }}</div>
      <div >{{ 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?

CodePudding user response：

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

 <v-col md="4"  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"  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