gpt4 book ai didi

javascript - Vuetify 网格系统行管理

转载 作者:行者123 更新时间:2023-12-01 15:16:39 25 4
gpt4 key购买 nike

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

Codepen

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>

最佳答案

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

它几乎可以工作,但是其他一些功能丢失了(例如靛蓝跨越整个列和行槽消失)。流体(蛇形)布局和 <v-row> 之间似乎有一些奇怪的交互。 & <v-col>机制。

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

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

当您更改页面宽度时,它也可以顺利响应。

Codepen

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 }

关于javascript - Vuetify 网格系统行管理,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59938294/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com