Vuetify 1.5 to 2.0 Column Wrap on Breakpoint

Question

I'm losing my mind here with Vuetify 2.0, I need to convert the old layout/flex to the new row/col syntax and I can't seem to do it.

I need to convert the following to the new 2.0 syntax:

<v-layout row wrap>
  <v-flex xs12 sm4> 1 </v-flex>
  <v-flex xs12 sm4> 2 </v-flex>
  <v-flex xs12 sm4> 3 </v-flex>
</v-layout>

Which would have the columns wrapped on XS devices and in a line on SM devices.

I've got the following, but how do I 'wrap' them with the breakpoints?

<v-row>
  <v-col xs="12" sm="4" >1</v-col>
  <v-col xs="12" sm="4" >2</v-col>
  <v-col xs="12" sm="4" >3</v-col>
</v-row>

On XS devices, it should be:
1
2
3

Instead, I get them bunched together: 1 2 3

This is annoying me more than it should :(

Ellis Enobun Ellis Enobun · Accepted Answer · 2019-08-16T11:37:58

To make it work, you have to set cols to auto or between 1-12, then adjust your col sizes viewports.

<v-row>
  <v-col cols="auto" md="4" sm="12" >1</v-col>
  <v-col cols="auto" md="4" sm="12" >2</v-col>
  <v-col cols="auto" md="4" sm="12" >3</v-col>
</v-row>

or

<v-row>
  <v-col cols="12" md="4" sm="12" >1</v-col>
  <v-col cols="12" md="4" sm="12" >2</v-col>
  <v-col cols="12" md="4" sm="12" >3</v-col>
</v-row>

I prefer the later.

Vuetify 1.5 to 2.0 Column Wrap on Breakpoint

1 Answers