CODEWITHSUNDEEP
javascriptvue.jsvuetify.jsnuxt.js
akaHeimdall
akaHeimdall

Reputation: 959

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

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?

Upvotes: 2

Views: 7793

Answers (4)

Saito
Saito

Reputation: 1

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%;
       }
    }

Upvotes: 0

Carlos Flores
Carlos Flores

Reputation: 11

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.

Upvotes: 1

Michal Lev&#253;
Michal Lev&#253;

Reputation: 37763

  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.

Upvotes: 8

Dhara Parmar
Dhara Parmar

Reputation: 293

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>

Upvotes: 1

Related Questions