CODEWITHSUNDEEP
htmlvue.jsvuetify.js
Romix
Romix

Reputation: 85

Vuetify Grid System Breakpoints don't work if expanding the site slowly

I have a problem with the Grid System Breakpoints in Vuetify. Except that problem mentioned in the title everything is working fine. As soon as I try expanding the site slowly, the breakpoints are just ignored. The columns should be among each other and with expanding they should move next to each other. Does someone have an idea where this might come from?

Code:

<v-container class = "big-container" fluid xs12 sm12 md16 lg12>
  <v-row = "container-row">
    <v-col class = "col-left"> </v-col>
    <v-col class = "col-right"> </v-col>
  </v-row>
</v-container>

Upvotes: 0

Views: 890

Answers (1)

IVO GELOV
IVO GELOV

Reputation: 14269

v-container does not support attributes like xs12 sm12 md16 lg12. You should use the cols (for xs), sm, md and lg attributes of v-col. And make sure that each breakpoint uses smaller number of grid cells than the previous one so that more items fit in the same row on larger screens. That is, it should look like this:

<v-container class = "big-container" fluid>
  <v-row justify="space-between" align="start">
    <v-col cols = "12" sm="8" md="6" lg="3" xl="1">card 1</v-col>
    <v-col cols = "12" sm="8" md="6" lg="3" xl="1">card 2</v-col>
    <v-col cols = "12" sm="8" md="6" lg="3" xl="1">card 3</v-col>
    <v-col cols = "12" sm="8" md="6" lg="3" xl="1">card 4</v-col>
    <v-col cols = "12" sm="8" md="6" lg="3" xl="1">card 5</v-col>
    <v-col cols = "12" sm="8" md="6" lg="3" xl="1">card 6</v-col>
    <v-col cols = "12" sm="8" md="6" lg="3" xl="1">card 7</v-col>
  </v-row>
</v-container>

Upvotes: 1

Related Questions