在 Vuetify 网格系统中使列高度相同

Question

我目前正在 Vuetify 中创建网格布局，但卡住了。我正在制作包含图像的卡片布局。这是示例：

我已经用下面的代码试过了，但是右边的小卡片由于边距没有对齐。

    <v-container>
      <v-row class="justify-center">
        <v-col cols="6">
          <v-hover v-slot:default="{ hover }">
            <v-card
              to="/pools"
              :elevation="hover ? 12 : 2"
              :class="{ 'on-hover': hover , 'overwrite-hover' : $vuetify.breakpoint.xsOnly}"
            >
              <v-img class="white--text" :src="images[0]">
                <v-card-title class="white--text align-end fill-height headline">My Pools</v-card-title>
                <template v-slot:placeholder>
                  <v-row class="fill-height" align="center" justify="center">
                    <v-progress-circular indeterminate color="grey lighten-5"></v-progress-circular>
                  </v-row>
                </template>
              </v-img>
            </v-card>
          </v-hover>
        </v-col>
        <v-col cols="2">
          <v-card class="ma-2" light height="50%"></v-card>
          <v-card class="ma-2" light height="50%"></v-card>
        </v-col>
      </v-row>
      <v-row class="justify-center">
        <v-col cols="8">
          <v-card light height="120px"></v-card>
        </v-col>
      </v-row>
   </v-container>

有没有人有建议，或者类似的例子？

提前致谢！

Answer 1

幸运的是，您只需要对右侧较小的卡片进行微调即可。利用 flex 并让 flex 发挥它的魔力 :) 它基本上告诉卡片在不剪裁的情况下增长到可用的最大高度。然后使用助手类 mb 和 mt.

在卡片之间添加一些边距

<v-col cols="2" class="d-flex" style="flex-direction:column">
  <v-card class="mb-1 flex-grow-1">
    Upper card
  </v-card>
  <v-card class="mt-1 flex-grow-1">
    Lower card
  </v-card>
</v-col>

作为 codesandbox。查看文件 "layout.vue" 以获取完整示例。

在 Vuetify 网格系统中使列高度相同

Make columns same height in Vuetify Grid System

grid-system

vuetify.js