时间戳

首页 > 解决方案 > Vuetify 网格系统行管理

javascript - Vuetify 网格系统行管理

问题描述

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

密码笔

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>

标签： javascriptvue.jsvuetify.js

解决方案

我花了很多时间重新排列 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 }

推荐阅读