Vue.js如何实现请求的网格视图

Question

我正在努力在Vue中创建想要的网格系统。我需要创建这样的东西。

​

​

这是我可以创建的图片。

​

​

正如你所看到的，我的布局是从中间开始的，而且我也不知道如何将History组件添加到两张卡片下，而是紧挨着另一张卡片。

下面是我的代码：

    <template>
  <div>
    <v-container fluid>
      <v-layout row wrap>
        <v-flex xs12 md3 lg3 >
          <Communication class="ml-6 mr-6" />
        </v-flex>
        <v-flex xs12 md5 lg5>
          <ActiveCall class="mr-2" />
        </v-flex>
        <v-flex xs12 md4 lg4>
          <Contacts class="ml-4 mr-6" />
        </v-flex>
      </v-layout>
    </v-container>
  </div>
</template>

我希望我提供了所有需要的东西。谢谢!

Answer 1

尝试/修改此方法：

<template>
  <div>
    <v-container fluid>
      <v-layout row wrap>
        <v-flex lg9>
          <v-flex lg4>
            <Communication />
          </v-flex>
          <v-flex lg8>
            <ActiveCall />
          </v-flex>
          <v-flex lg12>
            <History />
          </v-flex>
        </v-flex>
        <v-flex lg3>
          <Contacts />
        </v-flex>
      </v-layout>
    </v-container>
  </div>
</template>;