Here is the layout that I am working with:
https://i.stack.imgur.com/qlm60.png
This is the code snippet that I have implemented:
<template>
<v-card>
<v-card-text>
<v-container grid-list-xl fluid class="py-0 mb-5">
<v-layout row wrap>
<v-flex xs12 lg8>
<v-container class="pa-0 mb-5">
<v-layout>
<v-flex xs12 class="py-0">
<v-subheader class="pa-0 mb-3">
Title 1
</v-subheader>
</v-flex>
</v-layout>
<v-layout wrap>
<v-flex xs12 md4 lg6>
Content 1
</v-flex>
<v-flex xs12 md8 lg6>
Content 2
</v-flex>
</v-layout>
</v-container>
</v-flex>
<v-flex xs12 lg4>
<v-container class="pa-0">
<v-layout row>
<v-flex xs12 class="py-0">
<v-subheader class="pa-0 mb-3">
Title 2
</v-subheader>
</v-flex>
</v-layout>
<v-layout row>
<v-flex xs12>
Content 3
</v-flex>
</v-layout>
</v-container>
</v-flex>
</v-layout>
</v-container>
</v-card-text>
</v-card>
</template>
The current setup works well for my needs. However, I encountered an issue where "Content 2" might not always exist. When it doesn't exist, this undesired outcome occurs:
https://i.stack.imgur.com/60HgH.png
What I actually want to achieve is depicted in this image:
https://i.stack.imgur.com/9Kjlv.png
Is there a way to control the breakpoints so that I can switch between lg4 and lg8 based on the presence of "Content 2"? One solution I thought of was to create two v-flex sections, one with lg4 and one with lg8, and display only one depending on the existence of "Content 2". However, I want to avoid repeating code, and creating a new component is not feasible for me.
My ideal scenario would involve something like this:
<v-flex v-if="content2Exists" xs12 lg8>
<v-flex v-else xs12 lg4>
Blabla...
</v-flex>