title: Vuetify: grid layout with five columns
body: <p>Vuetify uses a 12-point grid system. Since 12 is not divisible by 5, how does one create a grid with 5 columns of the same width? The 5 columns should take all available space.</p>
  
  <p>What's the most "correct" way to do this?</p>
  
  <p>EDIT:
  I tried to implement John M's comment, but it doesn't fill up all the available horizontal space:</p>
  
  <pre><code>&lt;v-container&gt;
    &lt;v-card color="red"&gt;
      &lt;v-layout wrap align-content-space-around text-xs-center&gt;
        &lt;v-flex xs1&gt;&lt;/v-flex&gt;
        &lt;v-flex xs2&gt;&lt;v-card color="blue"&gt;&lt;v-card-text class="px-0"&gt;1&lt;/v-card-text&gt;&lt;/v-card&gt;&lt;/v-flex&gt;
        &lt;v-flex xs2&gt;&lt;v-card color="blue"&gt;&lt;v-card-text class="px-0"&gt;2&lt;/v-card-text&gt;&lt;/v-card&gt;&lt;/v-flex&gt;
        &lt;v-flex xs2&gt;&lt;v-card color="blue"&gt;&lt;v-card-text class="px-0"&gt;3&lt;/v-card-text&gt;&lt;/v-card&gt;&lt;/v-flex&gt;
        &lt;v-flex xs2&gt;&lt;v-card color="blue"&gt;&lt;v-card-text class="px-0"&gt;4&lt;/v-card-text&gt;&lt;/v-card&gt;&lt;/v-flex&gt;
        &lt;v-flex xs2&gt;&lt;v-card color="blue"&gt;&lt;v-card-text class="px-0"&gt;5&lt;/v-card-text&gt;&lt;/v-card&gt;&lt;/v-flex&gt;
        &lt;v-flex xs1&gt;&lt;/v-flex&gt;
      &lt;/v-layout&gt;
    &lt;/v-card&gt;
  &lt;/v-container&gt;
  </code></pre>
  
  <p>I want the red areas to be gone:
  <a href="https://i.stack.imgur.com/2yIi9.png" rel="noreferrer"><img src="https://i.stack.imgur.com/2yIi9.png" alt="enter image description here"></a></p>