Question

我正在尝试创建网格布局，但是遇到了麻烦。

我要创建的布局如下图所示。显示起来比解释容易。

侧面板卡布局，其中将填充项目列表。 A
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

您可以使用填充高度属性和断点来实现该格式。拥有<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网格布局-如何填充网格中元素的高度

1 个答案: