What is the best way to create 7 or 8 column grids with Vuetify's v-row and v-col components?

Question

What is the best way to create 7 or 8 column grids with Vuetify's v-row and v-col components?

I understand that vuetify's grid system is based on a 12-column flex-box layout, but I would like to customize it to have 7 or 8 columns by default instead of the usual 12. In the code snippet below, you can see my attempt:

<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>

After reading through the documentation, I thought that setting cols="7" would achieve the desired outcome, but it doesn't seem to be working as expected.

Is it actually possible to create a grid with 7 or 8 columns in Vuetify?

javascript vue.js vuetify.js nuxt.js

Answer 1

Answer №1

Vuetify's grid system uses 12 columns that are fixed and cannot be changed.
The props like cols, sm, and lg determine the width of the v-col in terms of columns (i.e., how many out of the 12 columns should each column take). For instance, col refers to extra small screens and larger, while sm encompasses small screens and up. Refer to media breakpoints in the documentation for more information...
The values assigned to these props must be whole numbers. This is because they are used during rendering to assign predefined CSS classes. For example, using lg="1" will result in the assignment of the ".col-lg-1" CSS class.

If you want a specific number of columns x where 12 is not evenly divisible by x (without a remainder), such as 5 or 7, you have two options (examples given for x = 7):

You can define 7 columns each with a width of 1 column and distribute the white space around them (using justification and possibly offsets) ...however, this may result in excessive white space.
Alternatively, you can utilize custom CSS and adjust it manually with media queries to ensure responsiveness and aesthetics across all screen sizes (source)

.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: Carefully consider whether this approach is truly necessary.

Personal note 2: I'm personally not a fan of Vuetify's grid system. While I understand how Flexbox functions, Vuetify's grid is based on Bootstrap and mapping from Vuetify to simple Flexbox can be challenging if you're not familiar with how Bootstrap operates (which I am not and prefer not to delve into).

Answer 2

Vuetify's grid system uses 12 columns that are fixed and cannot be changed.
The props like cols, sm, and lg determine the width of the v-col in terms of columns (i.e., how many out of the 12 columns should each column take). For instance, col refers to extra small screens and larger, while sm encompasses small screens and up. Refer to media breakpoints in the documentation for more information...
The values assigned to these props must be whole numbers. This is because they are used during rendering to assign predefined CSS classes. For example, using lg="1" will result in the assignment of the ".col-lg-1" CSS class.

If you want a specific number of columns x where 12 is not evenly divisible by x (without a remainder), such as 5 or 7, you have two options (examples given for x = 7):

You can define 7 columns each with a width of 1 column and distribute the white space around them (using justification and possibly offsets) ...however, this may result in excessive white space.
Alternatively, you can utilize custom CSS and adjust it manually with media queries to ensure responsiveness and aesthetics across all screen sizes (source)

.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: Carefully consider whether this approach is truly necessary.

Personal note 2: I'm personally not a fan of Vuetify's grid system. While I understand how Flexbox functions, Vuetify's grid is based on Bootstrap and mapping from Vuetify to simple Flexbox can be challenging if you're not familiar with how Bootstrap operates (which I am not and prefer not to delve into).

Answer 3

Answer №2

Instead of using v-col, you can opt for v-flex which displays 6 columns in a row. See the code snippet below:

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>

Answer 4

Instead of using v-col, you can opt for v-flex which displays 6 columns in a row. See the code snippet below:

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>

Answer 5

Answer №3

Hey there, I wanted to express my gratitude for this helpful post despite the time that has passed since it was posted.

It seems we were facing a similar challenge as I also needed 7 or 8 columns but couldn't figure it out until stumbling upon your post.

I am particularly thankful to Michal Levy for their code, which inspired me to make some modifications for responsiveness. I hope my updated version can benefit others as well.

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>

Warm regards.

Answer 6

Hey there, I wanted to express my gratitude for this helpful post despite the time that has passed since it was posted.

It seems we were facing a similar challenge as I also needed 7 or 8 columns but couldn't figure it out until stumbling upon your post.

I am particularly thankful to Michal Levy for their code, which inspired me to make some modifications for responsiveness. I hope my updated version can benefit others as well.

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>

Warm regards.

Answer 7

Answer №4

Encountering the same issue, I discovered a workaround. While you can adjust col-12 to cols-3 in your print layout, this sacrifices responsiveness for small screens <600px.

My solution involves declaring a @media print and overriding col-12 with other breakpoint classes. (Print always defaults to the smallest breakpoint CSS class)

For example, if using 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%;
   }
}

Answer 8

Encountering the same issue, I discovered a workaround. While you can adjust col-12 to cols-3 in your print layout, this sacrifices responsiveness for small screens <600px.

My solution involves declaring a @media print and overriding col-12 with other breakpoint classes. (Print always defaults to the smallest breakpoint CSS class)

For example, if using 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%;
   }
}

What is the best way to create 7 or 8 column grids with Vuetify's v-row and v-col components?

Answer №1

Answer №2

Instead of using v-col, you can opt for v-flex which displays 6 columns in a row. See the code snippet below:

Answer №3

Answer №4

Similar questions

Encountered an issue while executing the next build process

Tips for concealing the Google Chrome status bar from appearing on a webpage

How can I add content to the body of a modal in Bootstrap 3?

Can JavaScript be used to update/override Prototype version 1.4 to version 1.7 on a different website?

Loop through the data string in Ajax using a For Loop to populate it

What is the best method for designing a custom mask for the jQuery Masked Input Plugin that accommodates alphanumeric characters, spaces, and accented

I need help figuring out how to navigate between different pages in my Vue-cli app that has multiple pages configured

Avoiding multiple ajax requests due to multiple clicks

Tips for structuring classes in an Angular project

What is the process for linking to a backend on a distinct port in Next.js?

Selenium and PhantomJS are having trouble interpreting JavaScript code

What causes delayed state updates in React/NextJS until another state is updated or a fast refresh occurs?

Ways to ensure the CSS style remains active even after clicking the button

Can anyone offer a straightforward method for obtaining JavaScript output in Java within the Eclipse environment?

Button to access overlay menu on my map with OpenLayers 3

Ways to retrieve the complete user object in passport

Objects that are included into an array will end up with an undefined value

What is the best way to create a straightforward menu for my HTML game?

I encountered an issue when trying to dynamically add a text field in Angular 2. The error message received was "ERROR TypeError: Cannot read property '0' of

Restricting the fields in a $lookup operation in MongoDB