Change column width in grid in vuetify

Question

I have three columns under the row, each column has the cols value as 4. I want to reduce the width of the "col1", I tried to change the cols value from 4 to 3 but the column is getting smaller than I expected. So I want a cols value between 3 to 4(consider cols value to be 3.5). Is there a way I could acheive this?

<div id="app">
  <v-app id="inspire">
    <v-container class="grey lighten-5">
      <v-row no-gutters>
        <v-col cols="4">
          <v-card>col1</v-card>
        </v-col>
        <v-col cols="4">
          <v-card>col2</v-card>
        </v-col>
        <v-col cols="4">
          <v-card>col3</v-card>
        </v-col>
      </v-row>
    </v-container>
  </v-app>
</div>

Answer 1

As @Matthias indicated, the Vuetify grid is based on Bootstrap but is implemented with the flexbox grid system. Each "row" will always have 12 equally-sized "columns" whose width is based on the width of the grid container (although a v-col element can span multiple "columns", e.g. <v-col cols="3>). In addition, there is a "gutter" (empty space, like a margin) between each column, and there is a margin around the row. Therefore the width of 1 column is:

one-col-width = (container-width - ((2 * margin-width) + (11 * gutter-width))) / 12

If your v-col spans multiple columns, then the width of the column is:

col-width = (one-col-width * cols) + (gutter-width * (cols - 1))

The width of the grid container is either the calculated width of the parent element (the one that contains the grid) or the page (if it is a full-width layout).

In order to control the width of a column, your options are limited.

Option #1--Change the gutter/margin width

The default gutter width is 24px. You can change this by setting the dense property on v-row, which reduces the gutter width to 12px. You can also set the no-gutters prop on v-row which removes the gutters completely. This can make a significant difference since 11 * 24px == 264px.

Option #2--Set the fluid prop on the v-container

Setting the fluid prop on the v-container surrounding the grid will "extend the container across all viewport and device sizes." This removes horizontal constraints on your grid, essentially widening all of the columns.

Option #3--Use built-in margin/padding utilities

The auto margin helper utilities and spacing utilities are a set of classes you can add to your v-col elements to adjust their margins. For example, adding mr-4 as in <v-col class="mr-4"> will apply a 16px right margin. There are also others like mx-auto. This will adjust the effective space between columns, but the columns themselves will still take up the same amount of space.

Bottom line, you don't have complete freedom, but you can tweak your layout to accomplish some flexibility.