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?

Try altering md="4" to the value 3, this attributes takes precedence over the cols="3" if you screen size is over the medium size defined in the component <v-col> — Caio Alfonso
– Caio Alfonso, Commented Oct 26, 2022 at 16:11

Daniel · Accepted Answer · 2022-10-26 16:10:24Z

2

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

answered Oct 26, 2022 at 16:10

Daniel

35.9k17 gold badges115 silver badges163 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Change grid columns in Vue

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related