如何让Tailwind CSS Grid中的卡片垂直填充空间并保持等高

要让两张卡片高度一致，同时让左侧卡片填充空白区域，只需调整布局类和卡片属性，具体修改如下：

修改后的代码 #

<div class="flex flex-col md:flex-row justify-between items-center mt-5">
  <div class="grid grid-cols-1 md:grid-cols-3 gap-5 p-3">
    <!-- 左侧卡片容器 -->
    <div class="col-span-1 h-full">
      <v-card class="text-center h-full flex flex-column justify-center py-4" rounded="xl" elevation="4" color="white">
        <v-icon size="40" class="text-secondary">
          <i class="fas fa-bullseye"></i>
        </v-icon>
        <v-card-text class="text-h5 text-over text-primary">Misión</v-card-text>
      </v-card>
    </div>
    <!-- 右侧卡片容器 -->
    <div class="col-span-2 h-full">
      <v-card class="text-justify h-full pa-1" rounded="xl" elevation="4" color="white">
        <v-card-text class="text-h6 text-over text-secondary px-8 py-4">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Rerum aliquid rem fugiat! Molestias quis ad quasi modi dolor, quibusdam placeat fugit veritatis quisquam doloremque laboriosam maxime, ratione inventore iure tempora! Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem, placeat est distinctio nemo quo voluptatum fuga iure odio vero possimus iusto numquam omnis. Repudiandae quos molestias nisi magnam voluptatibus harum?</v-card-text>
      </v-card>
    </div>
  </div>
</div>

关键修改说明 #

1. 移除限制高度的类：删掉左侧的grid h-max嵌套和my-auto，避免容器高度被限制。
2. 统一容器高度：给左右两个卡片容器都加上h-full，让它们高度对齐。
3. 卡片撑满并居中内容：给两张卡片添加h-full，确保卡片高度铺满父容器；左侧卡片额外添加flex flex-column justify-center，在撑满高度的同时让内部图标和文字垂直居中，填充原本的空白区域。

内容的提问来源于stack exchange，提问作者Mario C Hernandez C