title: How to put components on two columns using VueJS Vuetify Grid?
body: <p>I want to align two components to show some data on two columns, I've followed the official tutorial  <a href="https://v1.vuetifyjs.com/en/layout/grid" rel="nofollow noreferrer">Vuetify Grid</a>. On my case components are fixed like a rows list, on the screen I put the red square to show my goal, and show the result of the code. Also, I tried changing <code>row</code> to <code>column</code> but not works, it keep on two rows. </p>
  
  <pre><code>    &lt;v-container&gt;
        &lt;v-layout row&gt;
          &lt;v-flex xs6&gt;Associado: {{item.nameUser}}&lt;/v-flex&gt;
          &lt;v-flex xs6&gt;Associado: {{item.nameUser}}&lt;/v-flex&gt;
        &lt;/v-layout&gt;
      &lt;/v-container&gt;
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/MpX81.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/MpX81.png" alt="sample image"></a></p>
  
  <p>complete code</p>
  
  <pre><code>    &lt;template&gt;
    &lt;v-content class="pa-1" fluid&gt;
      &lt;v-btn
        color="blue"
        dark
        small
        fixed
        bottom
        right
        fab
        @click="showRegisterTransactionDialog = true"
      &gt;
        &lt;v-icon&gt;mdi-plus&lt;/v-icon&gt;
      &lt;/v-btn&gt;
  
      &lt;v-data-table
        :mobile-breakpoint="NaN"
        :headers="headers"
        :items="transactionsLocal"
        :items-per-page="3000"
        :hide-default-footer="true"
        :single-expand="singleExpand"
        :expanded.sync="expanded"
        item-key="id"
        show-expand
        sort-by="showDate"
        class="elevation-1"
      &gt;
        &lt;template v-slot:top&gt;
          &lt;v-toolbar flat color="white"&gt;
            &lt;v-toolbar-title&gt;Fluxo de caixa&lt;/v-toolbar-title&gt;
            &lt;v-divider class="mx-4" inset vertical&gt;&lt;/v-divider&gt;
            &lt;v-spacer&gt;&lt;/v-spacer&gt;
          &lt;/v-toolbar&gt;
        &lt;/template&gt;
  
        &lt;template v-slot:item.value="{ item }"&gt;
          &lt;div style="color:green;" v-if="item.type == 'entry'"&gt;{{item.value}}&lt;/div&gt;
          &lt;div v-else style="color:red;"&gt;{{item.value}}&lt;/div&gt;
        &lt;/template&gt;
  
        &lt;template v-slot:expanded-item="{ headers, item }"&gt;
          &lt;v-container&gt;
            &lt;v-layout row&gt;
              &lt;v-flex xs6&gt;Associado: {{item.nameUser}}&lt;/v-flex&gt;
              &lt;v-flex xs6&gt;Associado: {{item.nameUser}}&lt;/v-flex&gt;
            &lt;/v-layout&gt;
          &lt;/v-container&gt;
        &lt;/template&gt;
      &lt;/v-data-table&gt;
  
      &lt;RegisterTransactionDialog
        @hideRegisterTransactionDialog="showRegisterTransactionDialog = false"
        :show="showRegisterTransactionDialog"
      &gt;&lt;/RegisterTransactionDialog&gt;
    &lt;/v-content&gt;
  &lt;/template&gt;
  </code></pre>
  
  <p><strong>UPDATE</strong></p>
  
  <p>I've set background color to black on <code>v-container</code> and discover that the problem is it. But, I don't know fix it too.</p>
  
  <p><code>&lt;v-container style="background-color: black;"&gt;</code></p>
  
  <p><a href="https://i.stack.imgur.com/fE1EO.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/fE1EO.png" alt="enter image description here"></a></p>