如何使用vuetify Grid获得简单的布局？

Question

我想做一个简单的布局，我有一行占据了最小的空间，下一行占据了剩余空间的100％。

我想使用vuetify网格系统

实际 预期

有人可以帮我实现布局吗？

<div id="app">
  <v-app id="inspire">
  <v-container class="pa-0" fluid style="background-color: purple;">
    <v-row style="background-color: yellow;">
      <v-col cols=6 style="background-color: blue;">
        <v-card style="background-color: red;">small A</v-card>
      </v-col>
      <v-col cols=6>
        <v-card style="background-color: red;">small B</v-card>
      </v-col>
    </v-row>
    <v-row style="background-color: yellow;">
      <v-col cols=12 style="background-color: green;">
        <v-card style="background-color: red;">big</v-card>
      </v-col>
    </v-row>
  </v-container>
  </v-app>
</div>

Codepen：https://codepen.io/caeycae/pen/YzWyRrW

Answer 1

<div id="app">
  <v-app id="inspire">
      <v-container class="pa-0 fill-height" fluid style="background-color: purple;">
        <v-row style="background-color: yellow;">
          <v-col cols=6 style="background-color: blue;">
            <v-card style="background-color: red;">small A</v-card>
          </v-col>
          <v-col cols=6>
            <v-card style="background-color: red;">small B</v-card>
          </v-col>
        </v-row>
        <v-row style="background-color: yellow;" class="fill-height">
          <v-col cols=12 style="background-color: green;">
            <v-card style="background-color: red;" class="fill-height">big</v-card>
          </v-col>
        </v-row>
      </v-container>
  </v-app>
</div>

将“ fill-height”类添加到

• 第一个v-container
• 最后一个v-row及其内部v-card