如何在Vuetify中让v-row每行显示4个自定义卡片组件

核心原因 #

Vuetify的网格系统基于12列布局，你当前给v-col设置的md="4"意味着每个列占4份宽度（12÷4=3），所以每行只能放3个卡片。要实现每行4个，只需调整列宽占比。

具体步骤 #

1. 移除冲突的自定义CSS
   你给外层div加的.reviews-grid样式会和Vuetify原生的v-row flex布局冲突，导致列排列异常，直接删掉这段CSS：

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

2. 修改v-col的列宽属性
   将v-col的md="4"改为md="3"（12÷3=4），这样中等屏幕及以上每行就能容纳4个卡片。如果需要适配小屏幕，可以额外添加cols属性（比如cols="6"让手机端每行显示2个）。

修改后的外层模板代码：

<template>
  <v-container fluid>
    <div>
      <v-row>
        <!-- 修改md属性为3，可选添加cols适配小屏 -->
        <v-col md="3" cols="6" 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>

为什么之前的尝试无效？ #

• 单独加cols="3"没效果：因为Vuetify的响应式属性优先级是xs < sm < md < lg < xl，你之前保留了md="4"，中等屏幕下会优先应用md的设置，所以必须修改md的值。
• 自定义grid样式干扰：v-row本身是flex布局，额外套grid会打乱原生的列排列逻辑，导致无法按预期显示4列。

内容的提问来源于stack exchange，提问作者philburns