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

Question

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

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

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

使用 vuetify 网格布局系统，我尝试获取它但无法很好地填充所有 space。我的代码如下。

有创建这种网格布局的好方法吗？

<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 展示了它的实际效果。

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

Vuetify grid layout - How to fill height of element in grid

grid-layout

flexbox

vue.js

vuetify.js