Vuetify：具有五列的网格布局

Question

Vuetify使用12点网格系统。由于12不能被5整除，因此如何创建一个具有5列相同宽度的网格？ 5列应占用所有可用空间。

最“正确”的方法是什么？

编辑： 我尝试实施John M的注释，但没有填满所有可用的水平空间：

<v-container>
  <v-card color="red">
    <v-layout wrap align-content-space-around text-xs-center>
      <v-flex xs1></v-flex>
      <v-flex xs2><v-card color="blue"><v-card-text class="px-0">1</v-card-text></v-card></v-flex>
      <v-flex xs2><v-card color="blue"><v-card-text class="px-0">2</v-card-text></v-card></v-flex>
      <v-flex xs2><v-card color="blue"><v-card-text class="px-0">3</v-card-text></v-card></v-flex>
      <v-flex xs2><v-card color="blue"><v-card-text class="px-0">4</v-card-text></v-card></v-flex>
      <v-flex xs2><v-card color="blue"><v-card-text class="px-0">5</v-card-text></v-card></v-flex>
      <v-flex xs1></v-flex>
    </v-layout>
  </v-card>
</v-container>

我希望红色区域消失：

Answer 1

我也需要五列布局，并且发现了一些对我有用的东西。我需要lg屏幕的五列布局，因此我在CSS中添加了以下规则：

https://codepen.io/rekam/pen/JmNPPx

/* vuetify lg min breakpoint: 1280 - 16     = 1264px */
/* vuetify lg max breakpoint: 1920 - 16 - 1 = 1903px */

@media (min-width: 1264px) and (max-width: 1903px) {
    .flex.lg5-custom {
        width: 20%;
        max-width: 20%;
        flex-basis: 20%;
    }
}

您需要在媒体查询中指定最小值和最大值，因为您没有这样做，20%规则将适用于所有尺寸。只需像这样在模板中使用它即可：

<!-- md4 is just here as an example -->
<v-layout row wrap>
    <v-flex md4 class="lg5-custom">box 1</v-flex>
    <v-flex md4 class="lg5-custom">box 2</v-flex>
    <v-flex md4 class="lg5-custom">box 3</v-flex>
    <v-flex md4 class="lg5-custom">box 4</v-flex>
    <v-flex md4 class="lg5-custom">box 5</v-flex>
    <v-flex md4 class="lg5-custom">box 6</v-flex>
    <v-flex md4 class="lg5-custom">box 7</v-flex>
</v-layout>

Answer 2

内容必须在卡片组件中吗？我问是因为您的问题中未指定。如果不是这样，您可以通过移除卡片组件并在容器和布局组件中替换/添加一些道具来实现此目的。

<div id="app">
  <v-container align-center text-xs-center>
    <v-layout justify-center>
      <v-flex xs2><v-card color="blue"><v-card-text class="px-0">1</v-card-text></v-card></v-flex>
      <v-flex xs2><v-card color="blue"><v-card-text class="px-0">2</v-card-text></v-card></v-flex>
      <v-flex xs2><v-card color="blue"><v-card-text class="px-0">3</v-card-text></v-card></v-flex>
      <v-flex xs2><v-card color="blue"><v-card-text class="px-0">4</v-card-text></v-card></v-flex>
      <v-flex xs2><v-card color="blue"><v-card-text class="px-0">5</v-card-text></v-card></v-flex>
    </v-layout>
  </v-container>
</div>