vuetify v-col xs="12" only fill half the width

Question

I am wondering why vuetify breakpoints are not working on when screen size is <600px

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  
})

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css" rel="stylesheet">

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>


<div id="app">
  <v-app id="inspire">
    <v-container class="grey lighten-5">
      <v-row no-gutters>
        <v-col
          v-for="n in 3"
          :key="n"
          xs="12"
          sm="12"
          md="4"
        >
          <v-card
            class="pa-2"
            outlined
            tile
          >
            One of three columns
          </v-card>
        </v-col>
      </v-row>
    </v-container>
  </v-app>
</div>

I am expecting same column width when screen size is XS

Codepan sample

Solution

It's a combination of two things

1. There is no XS prop available to v-col.
2. Columns automatically take up the entire available space within its parent container unless you've specified the width it should take up before hand.

Columns will automatically take up an equal amount of space within their parent container. This can be modified using the cols prop. You can also utilize the sm, md, lg, and xl props to further define how the column will be sized in different viewport sizes.

https://vuetifyjs.com/en/components/grids#auto-sizing-columns

To address this, set the "cols" prop of v-col to 12 to indicate that it should take up 12 columns across all viewports. You can consider it to be the "xs" property you're trying to use. Then, any larger viewports will inherit the last valid size.

<v-col
  v-for="n in 3"
  :key="n"
  cols="12"
  md="4"
>

Comments

[Chris Claude]

is the XS prop available on v-row or any other grid container? if not where is the XS prop applicable?

[Trenton Trama]

Vuetify 1.5 used the xs property on containers, but replaced it with cols instead in Vuetify 2.