This image shows what is going on… Box Five has extra text, and I am using fill-height on all v-cards to make matching heights for all cards..but this is only applied per row, not to all rows inside the v-row. Without hard-coding a specific height for all my cards, how can I make all cards be a uniform height?
<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>