More than 5 years have passed since last update.

Vuetify(v2.0.0 )でv-colのxsを設定する

Last updated at 2019-08-24Posted at 2019-08-24

vuetify(v2.0.0)からは、v-colでBreakpointsごとのgridの設定を行う。
Breakpointsは、これまで通り。

スマホでのBreakpointはxsとなる。スマホとそれ以外でgridを変えたい場合に、うまくいかずハマった。

  <v-row>
     <v-col lg=9 md=9 sm=9 cols=3>
        aaa
     </v-col>
     <v-col lg=3 md=3 sm=3 cols=9>
        bbb
     </v-col>
  </v-row>

v-colには、colsでgridを設定できるが、xl,lg,md,smに関しては細く設定が可能。
xsはなぜか設定できないので、以下のような書き方だとうまく動かない。

<v-col lg=9 md=9 sm=9 xs=3>

なので、colsで全体のgridを設定しておき、xl,lg,md,smの設定を上書きし、スマホとそれ以外でのgridを変更するしかない模様。