[Vuejs]-How to create a responsive layout in vuetify?

by

8👍

✅

From Vuetify Grid documentation page:

It contains 5 types of media breakpoints that are used for targeting specific screen sizes or orientations. The props for grid components are actually classes that are derived from their defined properties.

Which means that props that are passed to v-col component define responsive classes for the grid element.

If you go to #API section on the same page and select v-col from component’s select, the first available prop: {size}="{1-12} lists possible values to specify layout for each breakpoint:

xs: extra small,
sm: small,
md: medium,
lg: large,
xl: extra large

And they are used with values of 1 through 12.

Usage example:

<v-col 
  xs="12" 
  sm="5" 
  md="3"
>
  <v-card dark color="primary">
    ...
  </v-card>
</v-col>

Make sure to check v-col documentation for required layout structure for grid to work.

👤aBiscuit

Leave a comment