In google material framework, I have this code

        <div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-3-desktop mdc-layout-grid__cell--span-4-tablet mdc-layout-grid__cell--span-4-phone">
            <v-text-field :type="page.text_input_date_from.type" :label="page.text_input_date_from.label" box autofocus :append-icon="page.text_input_date_from.icon" v-model="page.text_input_date_from.value"></v-text-field>
        </div>
        <div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-3-desktop mdc-layout-grid__cell--span-4-tablet mdc-layout-grid__cell--span-4-phone">
            <v-text-field :type="page.text_input_date_to.type" :label="page.text_input_date_to.label" box autofocus :append-icon="page.text_input_date_to.icon" v-model="page.text_input_date_to.value"></v-text-field>
        </div>
        <div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-3-desktop mdc-layout-grid__cell--span-4-tablet mdc-layout-grid__cell--span-4-phone">
            <v-text-field :type="page.text_input_person_name.type" :label="page.text_input_person_name.label" box autofocus :append-icon="page.text_input_person_name.icon" v-model="page.text_input_person_name.value"></v-text-field>
        </div>
        <div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-3-desktop mdc-layout-grid__cell--span-4-tablet mdc-layout-grid__cell--span-4-phone">
            <v-text-field :type="page.text_input_pany_name.type" :label="page.text_input_pany_name.label" box autofocus :append-icon="page.text_input_pany_name.icon" v-model="page.text_input_pany_name.value"></v-text-field>
        </div>

Basically there is classes like this

mdc-layout-grid__cell--span-3
mdc-layout-grid__cell--span-3-desktop
mdc-layout-grid__cell--span-3-tablet
mdc-layout-grid__cell--span-3-phone

How can I replicate the same thing using vuetify?

I can't see any examples of responsive.

Thanks

In google material framework, I have this code

        <div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-3-desktop mdc-layout-grid__cell--span-4-tablet mdc-layout-grid__cell--span-4-phone">
            <v-text-field :type="page.text_input_date_from.type" :label="page.text_input_date_from.label" box autofocus :append-icon="page.text_input_date_from.icon" v-model="page.text_input_date_from.value"></v-text-field>
        </div>
        <div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-3-desktop mdc-layout-grid__cell--span-4-tablet mdc-layout-grid__cell--span-4-phone">
            <v-text-field :type="page.text_input_date_to.type" :label="page.text_input_date_to.label" box autofocus :append-icon="page.text_input_date_to.icon" v-model="page.text_input_date_to.value"></v-text-field>
        </div>
        <div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-3-desktop mdc-layout-grid__cell--span-4-tablet mdc-layout-grid__cell--span-4-phone">
            <v-text-field :type="page.text_input_person_name.type" :label="page.text_input_person_name.label" box autofocus :append-icon="page.text_input_person_name.icon" v-model="page.text_input_person_name.value"></v-text-field>
        </div>
        <div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-3-desktop mdc-layout-grid__cell--span-4-tablet mdc-layout-grid__cell--span-4-phone">
            <v-text-field :type="page.text_input_pany_name.type" :label="page.text_input_pany_name.label" box autofocus :append-icon="page.text_input_pany_name.icon" v-model="page.text_input_pany_name.value"></v-text-field>
        </div>

Basically there is classes like this

mdc-layout-grid__cell--span-3
mdc-layout-grid__cell--span-3-desktop
mdc-layout-grid__cell--span-3-tablet
mdc-layout-grid__cell--span-3-phone

How can I replicate the same thing using vuetify?

https://vuetifyjs./en/layout/grid

I can't see any examples of responsive.

Thanks

• javascript
• vue.js
• vuejs2
• vuetify.js

1 Answer 1

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 ponents are actually classes that are derived from their defined properties.

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

If you go to #API section on the same page and select v-col from ponent'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.