温馨提示:本文翻译自stackoverflow.com,查看原文请点击:javascript - Vuetify grid system row management

javascript - Vuetify网格系统行管理

发布于 2020-03-30 21:46:18

我正在尝试更改某些列中的行的放置方式。如所附图像所示,我希望红牌项目在放置的行上延伸,但是我不确定如何做到这一点。然后,蓝卡项目应移至底部,而不要像图片上那样留出空白。 在此处输入图片说明 这是代码:

码笔

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>

查看更多

提问者
Alex T
被浏览
21
Richard Matsen 2020-02-05 20:28

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

发布
问题

分享
好友

手机
浏览

扫码手机浏览