Me pregunto por qué los puntos de interrupción de vuetify no funcionan cuando el tamaño de la pantalla es <600px
new Vue({ el: '#app', vuetify: new Vuetify(), }) <link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/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> Espero el mismo ancho de columna cuando el tamaño de la pantalla es XS
es una combinacion de dos cosas
Las columnas ocuparán automáticamente la misma cantidad de espacio dentro de su contenedor principal. Esto se puede modificar usando la propiedad cols. También puede utilizar los accesorios sm, md, lg y xl para definir mejor cómo se dimensionará la columna en diferentes tamaños de ventana gráfica.
https://vuetifyjs.com/en/components/grids#auto-sizing-columns
Para abordar esto, configure el apoyo "cols" de v-col en 12 para indicar que debe ocupar 12 columnas en todas las ventanas gráficas. Puede considerar que es la propiedad "xs" que está tratando de usar. Entonces, cualquier ventana gráfica más grande heredará el último tamaño válido.
<v-col v-for="n in 3" :key="n" cols="12" md="4" >