如何在不使用 Vuetify 中的 "md/sm" 的情况下将所有图块设置为特定宽度？

Question

<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>

我想在不使用 md="3" 或 sm="4" 等的情况下将所有图块设置为特定宽度。
当我测试上面的代码时，浏览器显示的结果是这样的：

但是，我想将第 16 个图块设置为与其他图块相同的宽度，如下所示：

我不想使用 md 或 sm，因为我想单独设置磁贴的宽度和高度。
如何将所有图块设置为特定宽度，包括最后一个？

示例代码如下：
https://codesandbox.io/s/vuetify-grid-example-forked-tje7u?file=/src/App.vue

Answer 1

我不认为你可以使用 v-col 道具实现这一点，我不建议覆盖默认样式，但你可以通过简单的 CSS 规则实现所需的行为:

 <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>

风格：

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

或者您可以提高响应速度：

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

如何在不使用 Vuetify 中的 "md/sm" 的情况下将所有图块设置为特定宽度？

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

javascript

grid

vue.js

vuetify.js