I'm trying to make expanding cards using Vue, the problem is that when expanding a card, the cards on the right create an empty space,the entire bottom row goes down, and I just wanted the card directly below it to go down, not all.
This is the way it is currently:

This is the way I want to:

Here is the part of the code that I believe controls this, or would it be in the expansion part?
<v-container class="pt-0 mt-0">
<v-layout row wrap>
<v-flex
xs12
md6
lg3
v-for="stateCard in filteredSearch"
:key="stateCard.name"
>
<MakeTheCard :item="infoCard" />
</v-flex>
</v-layout>
</v-container>
I think that you have a CSS problem rather than Vue.
One approach is to make a flex container with columns, each containing X amount of elements.
like so:
<div class="row">
<div class="col">
<Card v-for="card in 2" :key="card" />
</div>
<div class="col">
<Card v-for="card in 2" :key="card" />
</div>
<div class="col">
<Card v-for="card in 1" :key="card" />
</div>
</div>
Just made a demo for you: https://codesandbox.io/s/withered-leaf-mv8lp