title: How to reduce Vuetify Grid column width for bigger screen sizes
body: <p>I am using <code>vuetify</code> 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</p>
  
  <pre><code>&lt;v-row justify="center" class="ma-0 pa-0"&gt;
      &lt;v-col
        id="vote-col"
        cols="1"
        class="pa-0 d-flex flex-column align-center"
      &gt;
        &lt;v-icon size="24"&gt;mdi-thumb-up&lt;/v-icon&gt;
        &lt;span&gt;{{ likes }}&lt;/span&gt;
      &lt;/v-col&gt;
      &lt;v-col id="question-col" cols="10" class="pa-0"&gt;
        &lt;v-row class="ma-0 replyFont"&gt;
          {{ reply }}
        &lt;/v-row&gt;
      &lt;/v-col&gt;
    &lt;/v-row&gt;
  </code></pre>
  
  <p>This looks fine on smaller screens. But as we go on the screen sizes above 1100px, even <code>cols="1"</code> becomes too wide and creates a lot of space between the icon column and the reply column as seen in the pictures below</p>
  
  <p><a href="https://i.stack.imgur.com/eo2EF.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/eo2EF.png" alt="enter image description here"></a>
  <a href="https://i.stack.imgur.com/RBCXN.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/RBCXN.png" alt="enter image description here"></a></p>
  
  <p>How to fix <code>v-col</code> having more width than required? I know I can't go less than <code>1</code> for <code>cols</code> property. How you guys been handling this?</p>