My goal is to display card elements of the same category evenly and continuously within a grid without line breaks.
In the current layout, there are inconsistencies where certain cards have more space between them than others, causing some elements to start on new lines when they should be displayed side by side. I've tried various grid layout formats such as align and justify, as well as removing the div container.
<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>