Stack Exchange
Vuetify grid system with for loops
Vue version: 2.6.10
Vuetify version: 1.5
At this time, I am getting every item in for loop in different row. If there is just 2 items, I would like to leave them in 1 row. If 3-4 items - 2 rows and so on.
My code:
<template v-slot:expand="props">
                    <v-card flat>
                        <v-card flat="flat" color="dark">
                            <v-container fluid="fluid" grid-list-xl="grid-list-xl">
                                <v-layout row>
                                    <v-flex xs8>Position and workload: </v-flex>
                                    <v-flex xs4>Categories: </v-flex>
                                </v-layout>
                                <v-layout row>
                                    <v-flex xs3>
                                        <template v-for="(position, pindex) in props.item.position">
                                            <v-text-field v-bind:key="pindex" class=" expandable" type="text" size="45"
                                                style="float:right" v-model="position.position" />
                                        </template>
                                    </v-flex>
                                    <v-flex xs1>
                                        <template v-for="(workload, windex) in props.item.workload">
                                            <v-text-field v-bind:key="windex" class="expandable" type="text" size="5"
                                                style="float:left" v-model="props.item.workload[windex]" />
                                        </template>
                                    </v-flex>
                                    <v-spacer></v-spacer>
                                    <v-flex xs4>
                                        <div>
                                            <v-text-field class="expandable" type="text"
                                                v-model="props.item.categories" />
                                        </div>
                                    </v-flex>
                                </v-layout>
                            </v-container>
                        </v-card>
                    </v-card>
                </template>

At this time, this is the output:


Wanted output:





Partial answer code. Everything going to one row, 3th, 4th and so on element is not going to lower row. If I am using wrap "Categories are going lower instead of positions.
  <template v-slot:expand="props">
                    <v-card flat>
                        <v-card flat="flat" color="dark">
                            <v-container fluid="fluid" grid-list-xl="grid-list-xl">
                                <v-layout row>
                                    <v-flex xs8>Pareigos ir krūvis: </v-flex>
                                    <v-flex xs4>Kategorijos: </v-flex>
                                </v-layout>
                                <v-layout row>
                                    <template v-for="pindex in props.item.position.length">
                                        <v-flex xs3>
                                            <v-text-field class=" expandable" type="text" size="45" style="float:right"
                                                v-model="props.item.position[pindex - 1].position" />
                                        </v-flex>
                                        <v-flex xs1>
                                            <v-text-field class="expandable" type="text" size="5" style="float:left"
                                                v-model="props.item.workload[pindex - 1]" />
                                        </v-flex>
                                    </template>
                                    <v-spacer> </v-spacer>
                                    <v-flex xs4>
                                        <div>
                                            <v-text-field class=" expandable" type="text"
                                                v-model="props.item.categories" />
                                        </div>
                                    </v-flex>
                                </v-layout>
                            </v-container>
                        </v-card>
                    </v-card>
                </template>

