Vuetify 网格系统行管理

Question

我正在尝试更改某些列中的行的放置方式。如附图所示，我希望红牌项目延伸到放置的行上，但我不确定如何做到这一点。然后蓝色卡片项目应该移动到底部，而不是像图片上那样留下空白区域。 这是代码：

代码笔

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data: () => ({
    lorem: `Lorem ipsum dolor sit amet, mel at clita quando. Te sit oratio vituperatoribus, nam ad ipsum posidonium mediocritatem, explicari dissentiunt cu mea. Repudiare disputationi vim in, mollis iriure nec cu, alienum argumentum ius ad. Pri eu justo aeque torquatos.`
  })
})

<div id="app">
    <v-app id="inspire">
        <v-container fluid>
            <v-row>
                <v-col cols="4" class="d-flex child-flex">
                    <v-card color="orange lighten-2" tile flat>
                        <v-card-text>Card 1</v-card-text>
                    </v-card>
                </v-col>
                <!--         triple colum here-->

                <v-row class="flex-column">

                    <v-col class="d-flex child-flex">
                        <v-card color="indigo lighten-2" dark tile flat>
                            <v-card-text>Card 3 Extended To fit</v-card-text>
                        </v-card>
                    </v-col>

                    <v-col class="d-flex child-flex">
                        <v-card color="indigo lighten-2" dark tile flat>
                            <v-card-text>Card 3 Extended To fit</v-card-text>
                        </v-card>
                    </v-col>

                    <v-col class="d-flex child-flex">
                        <v-card color="indigo lighten-2" dark tile flat>
                            <v-card-text>Card 3 Extended To fit</v-card-text>
                        </v-card>
                    </v-col>
                    <!--        next col -->
                </v-row>

                <v-col cols="4">
                    <v-card color="red lighten-2" dark tile flat>
                        <v-card-text>
                          {{ lorem }} {{ lorem }} 
                          {{ lorem }}{{ lorem }} 
                          {{ lorem }} {{ lorem }}
                      </v-card-text>
                    </v-card>
                </v-col>

                <!--         bottom row -->
                <v-col cols="4" class="d-flex child-flex">
                    <v-card color="purple lighten-1" tile flat>
                        <v-card-text>{{lorem}}</v-card-text>
                    </v-card>
                </v-col>

                <v-col cols="4" class="d-flex child-flex">
                    <v-card color="green lighten-2" tile flat>
                        <v-card-text>{{lorem}}</v-card-text>
                    </v-card>
                </v-col>

                <v-col cols="4">
                    <v-card color="blue lighten-2" tile flat>
                        <v-card-text>{{lorem}} {{lorem}}</v-card-text>
                    </v-card>
                </v-col>

            </v-row>
        </v-container>
    </v-app>
</div>

Answer 1

我花了很多时间重新排列 Vuetify<v-col>和<v-row>，基本上是试图将第三列单独分开，这样蓝色可以缩小，红色可以增长。

它几乎起作用了，但其他一些功能丢失了（例如靛蓝跨越整个列和行排水沟消失）。流体（蛇形）布局和<v-row>&<v-col>机制之间似乎存在一些奇怪的交互。

此外，当您更改页面宽度时，装订线会令人不安。

相反，我通过切换到CSS 网格获得了相当完美的结果- 更简单，更容易调整。

当您更改页面宽度时，它也能顺利响应。

代码笔

HTML

首先要注意，没有<v-row>或<v-col>元素，只是你想显示的东西。您可以以任何顺序（好吧，在容器内）将它们放在页面上，并且 CSS 网格负责放置。

<div id="app">
  <v-app id="inspire">
    <v-container fluid class="myGrid">
      <v-card class="orange" color="orange lighten-2" tile flat>
        <v-card-text>Card 1</v-card-text>
      </v-card>
      <v-card class="indigo1" color="indigo lighten-2" dark tile flat>
        <v-card-text>Card 3 Extended To fit</v-card-text>
      </v-card>
      <v-card class="indigo2" color="indigo lighten-2" dark tile flat>
        <v-card-text>Card 3 Extended To fit</v-card-text>
      </v-card>
      <v-card class="indigo3" color="indigo lighten-2" dark tile flat>
        <v-card-text>Card 3 Extended To fit</v-card-text>
      </v-card>
      <v-card class="red" color="red lighten-2" dark tile flat>
        <v-card-text>
          {{ lorem }} {{ lorem }} 
          {{ lorem }}{{ lorem }} 
          {{ lorem }} {{ lorem }}
        </v-card-text>
      </v-card>
      <v-card class="purple" color="purple lighten-1" tile flat>
        <v-card-text>{{lorem}} {{lorem}}</v-card-text>
      </v-card>
      <v-card class="green" color="green lighten-2" tile flat>
        <v-card-text>{{lorem}} {{lorem}}</v-card-text>
      </v-card>
      <v-card class="blue" color="blue lighten-2" tile flat>
        <v-card-text>{{lorem}}</v-card-text>
      </v-card>
    </v-container>
  </v-app>
</div>

CSS

CSS 网格区域允许您按行和列定义网格，然后将元素（通过唯一的类）分配给矩阵。

当您遇到更棘手的要求时，只需添加更多行或列并在其上散布元素（请参阅grid-template-areas，附加到该属性的字符串表示矩阵）。

.myGrid {
  display: grid;
  grid-template-columns: auto auto auto;         // 3 even self-sizing cols
  grid-template-rows: repeat(3, 1fr) auto auto;  // 5 rows, first 3 expand & last 2 shrink
  grid-template-areas: 
    "orange indigo1 red"
    "orange indigo2 red"
    "orange indigo3 red"
    "purple green red"
    "purple green blue"
    ;
  grid-gap: 0.5rem;
}
.orange { grid-area: orange }
.indigo1 { grid-area: indigo1 }
.indigo2 { grid-area: indigo2 }
.indigo3 { grid-area: indigo3 }
.red { grid-area: red }
.green { grid-area: green }
.purple { grid-area: purple }
.blue { grid-area: blue }