vue.js - Vuetify 网格布局 - 如何填充网格中元素的高度

Question

我正在尝试创建网格布局，但遇到了问题。

我尝试创建的布局附在下图中。展示比解释容易。

• 将填充项目列表的侧面板卡片布局。一个
• 2 元素顶部面板。
• 一个大的主面板来填充剩余空间在下面。

使用 vuetify 网格布局系统，我试图得到它，但无法很好地填充所有空间。我的代码如下。

是否有创建此网格布局的好方法？

<v-container fluid grid-list-md box>
  <v-layout row>

    <v-flex d-flex xs3>
      <v-layout row wrap>
        <v-card color="orange lighten-2" tile flat>
          <v-card-text>{{ lorem.slice(0, 90) }}</v-card-text>
        </v-card>

        <v-divider></v-divider>

        <v-card color="orange lighten-2" tile flat>
          <v-card-text>{{ lorem.slice(0, 90) }}</v-card-text>
        </v-card>

        <v-divider></v-divider>

        <v-card color="orange lighten-2" tile flat>
          <v-card-text>{{ lorem.slice(0, 90) }}</v-card-text>
        </v-card>

        <v-divider></v-divider>

        <v-card color="orange lighten-2" tile flat>
          <v-card-text>{{ lorem.slice(0, 90) }}</v-card-text>
        </v-card>
      </v-layout>

    </v-flex>

    <v-flex d-flex xs9>

      <v-layout row wrap>
        <v-layout row>
          <v-flex d-flex>
            <v-card color="blue-grey" dark tile flat>
              <v-card-text>{{ lorem }}</v-card-text>
            </v-card>
          </v-flex>

          <v-flex d-flex>
            <v-card color="blue-grey" dark tile flat>
              <v-card-text>{{ lorem }}</v-card-text>
            </v-card>
          </v-flex>
        </v-layout>

        <v-layout row>
          <v-flex d-flex xs9>
            <v-card color="blue-grey" dark tile flat>
              <v-card-text>{{ lorem }}</v-card-text> 
            </v-card>
          </v-flex>
        </v-layout>
      </v-layout>

    </v-flex>
  </v-layout>
</v-container>

Answer 1

您可以使用 fill-height 属性和断点来实现该格式。有<v-layout row wrap>将强制使用 xs12 的较大框占据整个下一行，因此您不必创建自己的布局。

    <v-layout row wrap>
        <v-flex d-flex xs6>
          <v-card color="blue-grey" dark tile flat>
            <v-card-text>{{ lorem }}</v-card-text>
          </v-card>
        </v-flex>

        <v-flex d-flex xs6>
          <v-card color="blue-grey" dark tile flat>
            <v-card-text>{{ lorem + lorem }}</v-card-text>
          </v-card>
        </v-flex>

        <v-flex fill-height d-flex xs12>
         <v-card color="blue-grey" dark tile flat>
           <v-card-text>{{ lorem + lorem + lorem}}</v-card-text>
         </v-card>
        </v-flex>
    </v-layout>

这是一个codepen这显示了它的实际效果。