How to reduce Vuetify Grid column width for bigger screen sizes

Question

I am using vuetify grid system to build a reply component. With column ratio of 1:11 for icon and reply column respectively. Below is the code for it

<v-row justify="center" class="ma-0 pa-0">
    <v-col
      id="vote-col"
      cols="1"
      class="pa-0 d-flex flex-column align-center"
    >
      <v-icon size="24">mdi-thumb-up</v-icon>
      <span>{{ likes }}</span>
    </v-col>
    <v-col id="question-col" cols="10" class="pa-0">
      <v-row class="ma-0 replyFont">
        {{ reply }}
      </v-row>
    </v-col>
  </v-row>

This looks fine on smaller screens. But as we go on the screen sizes above 1100px, even cols="1" becomes too wide and creates a lot of space between the icon column and the reply column as seen in the pictures below

How to fix v-col having more width than required? I know I can't go less than 1 for cols property. How you guys been handling this?

Answer 1

You could use cols="auto" to make the column the width of its content, and then no cols attribute on the other column to allow it to grow the remaining width.

    <v-row justify="center" class="ma-0 pa-0">
            <v-col id="vote-col" cols="auto" class="blue py-0 d-flex flex-column align-center">
                <v-icon size="24">mdi-thumb-up</v-icon>
                <span>0</span>
            </v-col>
            <v-col id="question-col" class="pa-0">
                <v-row class="ma-0 replyFont">
                    ...
                </v-row>
            </v-col>
    </v-row>

Demo: https://codeply.com/p/pX7pin7b4L