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

Using the "i" parameter in a Lodash for loop results in undefined, however, it functions properly with specific values set

Console displays null as the attribute value

Utilizing Vue Cli's Webpack Proxy feature

An 'Syntax Error' message appears in Internet Explorer when JSONP does not receive a response

react componentdidupdate triggers never-ending iteration

The table's content extends beyond the confines of the page

Guide to extracting a key from the route module with the help of vuex-router-sync

Managing dynamic input texts in React JS without using name properties with a single onChange function

How to Use Vue.js to Find the Nearest Div Element with a Specific

What is the best way to automatically select a checkbox when using ng-repeat on page

Create a full-width slider using Materialize CSS framework

Set up specific vue.config.js configurations for unique environments in Vue

Instructions on accessing the subsequent li a starting from a designated location

Rendering JSON Data in JavaScript using Table Pagination

Copying to the clipboard now includes the parent of the targeted element

Stop MatDialog instance from destroying

Utilize the MaterialUI DataGrid to showcase nested object values in a visually appealing

Change the controller's classes and update the view in Angular

Creating a function that writes to a file by utilizing the data input from

JavaScript and AJAX: Dynamically Create URLs