How can I set all tiles to a certain width without using "md/sm" in Vuetify?

user_2648576 0
Viewed 31
<v-row no-gutters>
  <v-col class="item" v-for="(item, index) in items" :key="index">
    <div class="pa-3" style="width: 120px; height: 200px">
      {{ item.name }}
    </div>
  </v-col>
</v-row>

I want to set all tiles to a certain width without using md="3" or sm="4" and so on.
When I test the above code, the browser shows the result like this: current result

However, I want to set the 16th tile to the same width of other tiles like this:
expected result

I don't want to use md or sm, because I want to set the width and height of the tile individually.
How can I set all tiles to a certain width, including the last one?

Here is the sample code:
https://codesandbox.io/s/vuetify-grid-example-forked-tje7u?file=/src/App.vue

vuetify.js vue.js grid javascript
1 Answers

I don't that you could achieve that using v-col props and I don't recommend to override the default style, but you could achieve the desired behavior with simple CSS rules :

 <v-container class="pa-1" fluid>
      <section class="grid">
        <div class="item" v-for="(item, index) in items" :key="index">
          <div class="pa-3" style="width: 120px; height: 200px">
            {{ item.name }}
          </div>
        </div>
      </section>
 </v-container>

style :

.grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,120px)
}

or you could make more responsive :

.grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(120px,1fr))
}
user_81728570
Related