VuetifyJS Grid System问题：无需display: grid，如何让卡片跨两行？

可以实现，无需自定义display: grid CSS，直接用Vuetify的网格组件属性就能搞定。

核心实现思路 #

Vuetify的网格系统基于Flexbox，通过v-row和v-col的组合配合嵌套布局就能达成目标：

• 将需要跨两行的卡片放在独立v-col中，设置对应宽度比例（比如12列栅格下占6列）
• 其余卡片放在相邻v-col内，通过嵌套v-row将它们拆分为上下两行排列

示例代码 #

<template>
  <v-container fluid>
    <v-row>
      <!-- 跨两行的卡片 -->
      <v-col cols="6">
        <v-card class="h-100">
          <v-card-text>
            这是需要跨两行显示的长内容，会自动占满父列的全部高度...
          </v-card-text>
        </v-card>
      </v-col>

      <!-- 右侧两行卡片组 -->
      <v-col cols="6">
        <v-row dense>
          <v-col cols="12" class="mb-2">
            <v-card>
              <v-card-text>卡片1</v-card-text>
            </v-card>
          </v-col>
          <v-col cols="12">
            <v-card>
              <v-card-text>卡片2</v-card-text>
            </v-card>
          </v-col>
        </v-row>
      </v-col>
    </v-row>
  </v-container>
</template>

关键细节 #

• 给跨两行的卡片添加h-100类，确保它占满父列的高度
• 嵌套的v-row可使用dense属性缩减间距，让布局更紧凑
• 若需响应式适配，可给v-col添加sm/md等断点属性，匹配不同屏幕尺寸

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