I'm trying to change how the rows in certain columns are placed. As seen on the attached image I want the red card item to extend over the row that is placed in, however I'm not sure how I can do that. The blue card item should then move to the bottom instead of leaving white space like on the picture. Here is the code:
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>I'm trying to change how the rows in certain columns are placed. As seen on the attached image I want the red card item to extend over the row that is placed in, however I'm not sure how I can do that. The blue card item should then move to the bottom instead of leaving white space like on the picture. Here is the code:
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>-
Seems like you just missed the
d-flexin the last v-flex no? – Thiago de Oliveira Cruz Commented Jan 27, 2020 at 20:43 - Yes But this will extend blue to the bottom but I want the red one to be extended over the row line like you can see on the picture – Alex T Commented Jan 28, 2020 at 9:36
- I think what you want to do is using columns instead of flex items and inside those columns you then declare the rows as you want with flex. That will make the desired layout you want. Not sure... if is doable with vuetify without a lot of extra divs and codes... – Thiago de Oliveira Cruz Commented Jan 28, 2020 at 16:58
3 Answers
Reset to default 9 +50I spent quite a bit of time rearranging the Vuetify <v-col> and <v-row>, basically trying to separate the third column out by itself, so that blue could be shrunk and red could be grown.
It nearly worked, but some other features were lost (like the indigo's spanning their entire column and row-gutters disapearing). There seems to be some weird interaction between the fluid (snaking) layout and the <v-row> & <v-col> mechanism.
Also, the gutters have an disturbing wonkiness as you change page width.
Instead I got a fairly perfect result by switching to CSS grid - simpler and easier to adjust.
It's also smoothly responsive when you change page width.
Codepen
HTML
First thing to note, no <v-row> or <v-col> elements, just the things you want to display. You can throw them on the page in any order (well, inside the container) and the CSS grid takes care of placement.
<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 areas allow you to define the grid in rows and columns, then assign elements (via a unique class) to the matrix.
As you get more tricky requirements, just add more rows or columns and spread elements over them (see grid-template-areas, the strings attached to that property represent the matrix).
.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 }
Hope this helps.
https://codepen.io/Derek_Robertson/pen/NWPmwMK
<div id="app">
<v-app id="inspire">
<v-container fluid grid-list-sm>
<v-layout row wrap>
<v-flex d-flex xs12 sm4 child-flex>
<v-layout row wrap>
<!-- tutaj jest sie zaczyna gorna czesc-->
<v-flex d-flex xs12 sm12 child-flex>
<v-card color="orange lighten-2" tile flat>
<v-card-text>Card 1</v-card-text>
</v-card>
</v-flex>
<v-flex d-flex xs12 sm12 child-flex>
<v-card color="purple lighten-1" tile flat>
<v-card-text>{{lorem}}</v-card-text>
</v-card>
</v-flex>
</v-layout>
</v-flex>
<v-flex d-flex xs12 sm2 child-flex>
<v-layout row wrap>
<!-- tutaj jest sie zaczyna gorna czesc-->
<v-flex d-flex xs12 sm12>
<!--tutaj sie wrapuje na row, w sensie zamiast na jednym rowie robia sie dwa rowy tak zeby zmatchowac wielkosc tych kolun obok-->
<v-layout row wrap>
<v-flex d-flex>
<v-card color="indigo lighten-2" dark tile flat>
<v-card-text>Card 2 Extended To fit</v-card-text>
</v-card>
</v-flex>
<v-flex d-flex>
<v-card color="indigo lighten-2" dark tile flat>
<v-card-text>Card 3 Extended To fit</v-card-text>
</v-card>
</v-flex>
<v-flex d-flex>
<v-card color="indigo lighten-2" dark tile flat>
<v-card-text>Card 4 Extended To fit</v-card-text>
</v-card>
</v-flex>
</v-layout>
</v-flex>
<v-flex xs12 sm12 child-flex>
<v-card color="green lighten-2" tile flat>
<v-card-text>{{lorem}}</v-card-text>
</v-card>
</v-flex>
</v-layout>
</v-flex>
<v-flex d-flex xs12 sm6 child-flex>
<v-layout row wrap>
<!-- tutaj jest sie zaczyna gorna czesc-->
<v-flex d-flex xs12 sm12 style="min-height:156px;" >
<v-card color="red lighten-2" dark tile flat>
<v-card-text>{{ lorem.slice(0, 100) }}</v-card-text>
</v-card>
</v-flex>
<v-flex xs12 sm12 child-flex>
<v-card color="blue lighten-2" tile flat>
<v-card-text>{{lorem}} {{lorem}}</v-card-text>
</v-card>
</v-flex>
</v-layout>
</v-flex>
</v-layout>
</v-container>
</v-app>
</div>
You just have to add d-flex to you tag. Image showing it works
The code of your last will be like this.
<v-flex d-flex xs12 sm6 child-flex>
<v-card color="blue lighten-2" tile flat>
<v-card-text>{{lorem}} {{lorem}}</v-card-text>
</v-card>
</v-flex>