Flex column layout for new vuetify API

Question

Can anyone please tell me how to adjust this code for the new vuetify syntax with rows and cols instead of v-layout and v-flex? I tried a lot but couldn't get this to work.

<div id="app">
  <v-app id="inspire">
    <v-container fluid fill-height class="grey lighten-5 flex-column">
      <v-layout column no-gutters style="width: 100%">
        <v-flex xs10 class="red pa-4">
            <div class="text-h4">1st Layout</div>
        </v-flex>
        <v-flex xs2 class="yellow pa-4">
            <div class="text-h4">2nd Layout</div>
        </v-flex>
      </v-layout>
    </v-container>
  </v-app>
</div>

Link to codepen: https://codepen.io/anindyamanna/pen/oNLBQbW?editable=true&editors=101%3Dhttps%3A%2F%2Fvuetifyjs.com%2F

Blackraspberryyy Blackraspberryyy · Accepted Answer · 2020-10-27T06:28:35

Replace v-layout to v-row then v-flex to v-col as stated in the docs. ~~I'm assuming that you want to achieve two columns that are placed side by side, occupying the whole width.~~

<v-row style="width: 100%;" no-gutters>
  <v-col cols="10" class="red pa-4"><div class="text-h4">1st Layout</div></v-col>
  <v-col cols="2" class="yellow pa-4"><div class="text-h4">2nd Layout</div></v-col>
</v-row>

Since you want to place the divs on top of each other, you must add d-flex and flex-column to your <v-row> so that it will have a display: flex. Then, you need to override the max-width of the <v-col> to 100%;

<v-row class="d-flex flex-column" style="width: 100%;" no-gutters>
  <v-col cols="10" class="red pa-4" style="max-width: 100%">
    <div class="text-h4">1st Layout</div>
  </v-col>
  <v-col cols="2" class="yellow pa-4" style="max-width: 100%">
    <div class="text-h4">2nd Layout</div>
  </v-col>
</v-row>

Here's a demo: https://codepen.io/blackraspberry08/pen/OJXmLpR

Flex column layout for new vuetify API

1 Answers