Vuetify Grid中v-col的fill-height无法统一所有行卡片高度问题

当前遇到的问题是：Box Five包含额外文本，已为所有v-card设置fill-height属性，但该效果仅作用于单行，无法让v-row内所有行的卡片高度统一。如何在不硬编码固定高度的情况下实现所有卡片高度一致？

原代码示例：

<template>
  <div>
    <v-container class="bg-surface-variant mb-6">
      <v-row>
        <v-col md="4" class="align-center justify-center">
          <v-card class="fill-height pa-2 ma-2">
            <div style="padding-right: 10px; flex-grow: 1; text-align: left">
              Box One
            </div>
          </v-card>
        </v-col>
        <v-col md="4" class="align-center justify-center">
          <v-card class="fill-height pa-2 ma-2">
            <div style="padding-right: 10px; flex-grow: 1; text-align: left">
              Box Two
            </div>
          </v-card>
        </v-col>
        <v-col md="4" class="align-center justify-center">
          <v-card class="fill-height pa-2 ma-2">
            <div style="padding-right: 10px; flex-grow: 1; text-align: left">
              Box Three
            </div>
          </v-card>
        </v-col>
        <v-col md="4" class="align-center justify-center">
          <v-card class="fill-height pa-2 ma-2">
            <div style="padding-right: 10px; flex-grow: 1; text-align: left">
              Box Four
            </div>
          </v-card>
        </v-col>
        <v-col md="4" class="align-center justify-center">
          <v-card class="fill-height pa-2 ma-2">
            <div style="padding-right: 10px; flex-grow: 1; text-align: left">
              Box Five with extra text to show wrapping
            </div>
          </v-card>
        </v-col>
        <v-col class="align-center justify-center" md="4">
          <v-card class="fill-height pa-2 ma-2">
            <div style="padding-right: 10px; flex-grow: 1; text-align: left">
              Box Six
            </div>
          </v-card>
        </v-col>
      </v-row>
    </v-container>
  </div>
</template>

解决方案 #

要实现多行卡片统一等高，核心是让每一列先统一高度，再让卡片填充列的高度。具体修改步骤如下：

• 给v-row添加align="stretch"属性，让所有子列自动拉伸到当前行的最大高度
• 移除v-col上的align-center justify-center类，避免列本身高度被限制，将内容居中的逻辑移到卡片内部容器
• 保留v-card的fill-height属性，确保卡片填满父列高度

修改后的代码示例：

<template>
  <div>
    <v-container class="bg-surface-variant mb-6">
      <v-row align="stretch">
        <v-col md="4">
          <v-card class="fill-height pa-2 ma-2">
            <div class="d-flex align-center justify-center h-100" style="padding-right: 10px; text-align: left">
              Box One
            </div>
          </v-card>
        </v-col>
        <v-col md="4">
          <v-card class="fill-height pa-2 ma-2">
            <div class="d-flex align-center justify-center h-100" style="padding-right: 10px; text-align: left">
              Box Two
            </div>
          </v-card>
        </v-col>
        <v-col md="4">
          <v-card class="fill-height pa-2 ma-2">
            <div class="d-flex align-center justify-center h-100" style="padding-right: 10px; text-align: left">
              Box Three
            </div>
          </v-card>
        </v-col>
        <v-col md="4">
          <v-card class="fill-height pa-2 ma-2">
            <div class="d-flex align-center justify-center h-100" style="padding-right: 10px; text-align: left">
              Box Four
            </div>
          </v-card>
        </v-col>
        <v-col md="4">
          <v-card class="fill-height pa-2 ma-2">
            <div class="d-flex align-center justify-center h-100" style="padding-right: 10px; text-align: left">
              Box Five with extra text to show wrapping
            </div>
          </v-card>
        </v-col>
        <v-col md="4">
          <v-card class="fill-height pa-2 ma-2">
            <div class="d-flex align-center justify-center h-100" style="padding-right: 10px; text-align: left">
              Box Six
            </div>
          </v-card>
        </v-col>
      </v-row>
    </v-container>
  </div>
</template>

原理说明 #

• v-row align="stretch"会强制同一行内的所有v-col高度匹配该行中最高的列
• 卡片内部的d-flex align-center justify-center h-100类，既实现了内容居中，又保证容器占满卡片的全部高度
• 卡片的fill-height属性确保卡片完全填充父列的高度，最终实现所有卡片高度统一

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