Я пытаюсь равномерно и непрерывно отображать элементы карточки одной и той же категории внутри сетки, не начиная новую строку.
Как видите, 110-02641AR находится рядом с 110-02642AL, но пространство больше, чем для остальных элементов. И, например, 128-02545R начинается с новой строки вместо продолжения со следующей строки с 125-02028L.
Я пробовал все форматирование макета сетки, такое как выравнивание и выравнивание. Я также попытался удалить div.
<v-layout v-for="(parentKey,j) in filteredGroupedParts" :key="j">
<div>
<v-subheader class="partCatSub" row style="padding-top:15px">
{{parentKey.group}}
<a :name="parentKey.group"></a>
</v-subheader>
<v-container fluid grid-list-sm>
<v-layout row wrap>
<div v-for="(key,i) in parentKey.partGroups" :key="i">
<v-layout row wrap>
<v-flex shrink v-for="(key1,i1) in key.parts" :key="i1">
<v-card :class="[isActive?'selectedpart':'card']" @click="isActive=!isActive">
<v-card-title primary class="title" style="padding-bottom:0px">
{{key1.interchangeNo}}
<v-spacer></v-spacer>
Qty. {{key1.quantity}}
</v-card-title>
<v-card-title style="padding-top:7px;height:86px">{{key1.description}}</v-card-title>
<v-card-title style="padding-bottom: 0px;padding-top:0px;font-weight: bold">
{{key1.soldLastThirtyDays}} (${{key1.avgPriceLastThirtyDays}}) |
{{key1.soldLastSixtyDays}} (${{key1.avgPriceLastSixtyDays}}) |
{{key1.soldLastNinetyDays}} (${{key1.avgPriceLastNinetyDays}})
<v-spacer></v-spacer>
Lookups: {{key1.partActivityLastYear}}
</v-card-title>
</v-card>
</v-flex>
</v-layout>
</div>
</v-layout>
</v-container>
</div>
</v-layout>