Vuetify.js grid system doesn't align as expected

Question

I have the following part of my front-end

<v-container grid-list-lg>
    <v-layout row wrap>
      <v-flex
      xs12
      v-bind:key="producto.id"
      v-for="producto in productos">

          <v-flex xs6>
            <v-text-field
              :id="'id-'+producto.idProd_factura"
              label="  ID del Producto">
            </v-text-field>
          </v-flex>
          <v-flex xs6>
            <v-text-field
              :id="'nombre-'+producto.idProd_factura"
              label="Nombre"
              box
              disabled="true">
            </v-text-field>
          </v-flex>
      </v-flex>
    </v-layout>
  </v-container>

So i think i have a v-flex of 12, and inside this i've two v-flex of 6 each one, so they should be one beside the other. But it's what i get:

So you can see, each v-text-field from each v-flex DOES have a size of 6, but they are one below the other!

Answer 1

Please, refer to nested grid examples in Vuetify documentation.

To maintain nested grid layout each row should be wrapped with v-layout component. Following structure as an example:

<v-layout row wrap>
  <v-flex xs12>
    <v-layout>
      <v-flex xs6>
        <!-- input field -->
      </v-flex>
      <v-flex xs6>
        <!-- input field -->
      </v-flex>
    </v-layout>
  </v-flex>
</v-layout>