javascript - How to output 7 or 8 column grids using vuetity's v-row and v-col? - Stack Overflow

admin管理员组

文章数量:1344473

I get that vuetify's grid properties are built around the 12 column flex-box, but I'd like to create a grid with a default of 7 or 8 columns instead of the typical 12 as in this example:

<v-row>
  <v-col 
    v-for="(n, index) in 15" 
    :key="index"
    cols="7" 
    sm="7" 
    md="3" 
    lg="1" 
  >
    <v-card>
      <v-card-title>{{ index }}</v-card-title>
    </v-card>
  </v-col>
</v-row>

My read of the documentation was that by setting the cols="7" (instead of 12) I could achieve this result, but it's not looking the case.

Is this even possible?

I get that vuetify's grid properties are built around the 12 column flex-box, but I'd like to create a grid with a default of 7 or 8 columns instead of the typical 12 as in this example:

<v-row>
  <v-col 
    v-for="(n, index) in 15" 
    :key="index"
    cols="7" 
    sm="7" 
    md="3" 
    lg="1" 
  >
    <v-card>
      <v-card-title>{{ index }}</v-card-title>
    </v-card>
  </v-col>
</v-row>

My read of the documentation was that by setting the cols="7" (instead of 12) I could achieve this result, but it's not looking the case.

Is this even possible?

• javascript
• vue.js
• vuetify.js
• nuxt.js

Share Improve this question Follow asked Jan 1, 2020 at 11:40 akaHeimdallakaHeimdall 95933 gold badges1010 silver badges2929 bronze badges 4

• I'd like to create a grid with a default of 7 or 8 columns instead of the typical 12 ...what do you mean by that ? Please clarify.... – Michal Levý Commented Jan 1, 2020 at 11:45
• @MichalLevý The default attribute for cols is 12 <v-col cols="12"> for a 12 col grid. I'm trying to instead create a 7 or 8 column grid. Does that help explain? Thanks. – akaHeimdall Commented Jan 2, 2020 at 6:37
• Well, not really. Are you trying to create column of cards, each card 7 columns wide (out of 12 of total columns Vuetify grid is using) ? – Michal Levý Commented Jan 2, 2020 at 6:45
• I'm trying to do the inverse of that; I'm trying to create a 7-card-wide grid. In other words, a grid with 7 columns: each row containing 7 columns and each column containing one card. Thanks. – akaHeimdall Commented Jan 2, 2020 at 6:49

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 8

1. Vuetify grid is using 12 columns and its fixed. No way around it...
2. props like cols/sm/lg define width of v-col in columns (ie how many of 12 columns should this column take). col means xs and larger screen, sm means small and larger etc. See media breakpoints in the docs...
3. Values to these props have to be a whole numbers. Its because when rendering, they are used to assign predefined CSS classes. For example lg="1" will assign CSS class ".col-lg-1"

It all means that if you want number of columns x where 12 is not divisible by x (without a reminder) like 5 or 7 you have 2 options (examples for x = 7):

1. You can define 7 columns with width of 1 columns and distribute white space around (using justify and maybe offset) ...which is far from perfect, too much white space
2. Or you must use custom CSS and tune it yourself with media queries to make it responsive and nice on all screen sizes (inspiration)

.custom7cols {
  width: 14%;
  max-width: 14%;
  flex-basis: 14%;
}

      <v-row>
        <v-col 
          v-for="(n, index) in 15" 
          :key="index"
          class="custom7cols" 
        >
          <v-card>
            <v-card-title>Column {{ n }}</v-card-title>
          </v-card>
        </v-col>
      </v-row> 

Demo

Personal note 1: Think twice whether you really need this

Personal note 2: I don't like Vuetify's grid system. I know how Flexbox forks but Vuetify grid is based on Bootstrap and if you don't know how Bootstrap works (I don't and don't want to) it's really hard to map from Vuetify to simple Flexbox.

You can use v-flex instead of v-col, It shows 6 cols in a row, refer below piece of code:

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

<div id="app">
    <v-app id="inspire">
        <v-container class="grey lighten-5">
            <v-row no-gutters>
                <template>

                    <v-flex xs7 sm7 md3 lg2 v-for="(n,index) in 15" :key="n">
                        <v-card>
                            <v-card-title>{{ index }}</v-card-title>
                        </v-card>
                    </v-flex>
                </template>
            </v-row>
        </v-container>
    </v-app>
</div>

sorry I know it's been some time since you posted this messages. I was trying to achieve the same result. I need 7 or 8 columns, I was stuck until I found this post.

First of all thanks.

I need it to be responsive, if the window size was under 600px, it did not look good with 7 or 8 columns in my case. So I make some changes to Michal Levy's code (thanks so much), and I want to share it, maybe it will be helpful for others.

CSS:

.custom4cols {
  width: 25%;
  max-width: 25%;
  flex-basis: 25%;
}
.custom7cols {
  width: 14%;
  max-width: 14%;
  flex-basis: 14%;
}

JS:

<v-row>
    <v-col 
      v-for="(n, index) in 15" 
      :key="index"
      :class="{
        custom4cols: $vuetify.breakpoint.xs,
        custom7cols: $vuetify.breakpoint.smAndUp
      }" 
    >
      <v-card>
        <v-card-title>Column {{ n }}</v-card-title>
      </v-card>
    </v-col>
  </v-row>

Best regards.

I run also into this issue. Of cause u can set the col-12 to your print layout to cols-3 or what ever fit, but then you lose the responsive design for small screen <600px.

My solution is, declare a @media print and override col-12 by other brakepoint classes. (Print takes always smallest brakpoint CSS class)

Example if col 12 but sm-3 use sm-3 flex/width

    @media print {
      div.col-sm-3.col-12 {
          flex: 0 0 25%;
          max-width: 25%;
       }
       div.col-sm-6.col-12 {
         flex: 0 0 50%;
         max-width: 50%;
       }
    }

本文标签： javascriptHow to output 7 or 8 column grids using vuetity39s vrow and vcolStack Overflow