Блог

Я пытаюсь создать расширяющиеся карты с помощью Vue, проблема в том, что при расширении карты карты справа создают пустое пространство, весь нижний ряд опускается, и я просто хотел, чтобы карта прямо под ней опускалась, а не вся.

Так оно и есть в настоящее время:

Это то, как я хочу:

Вот часть кода, которая, как я полагаю, управляет этим, или это будет в части расширения?

 <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>
 

Я думаю, что у вас проблема с CSS, а не с Vue.

Один из подходов заключается в создании flex контейнера с columns , каждый из которых содержит X количество элементов.

вот так:

   <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>
 

Только что сделал для вас демонстрацию: https://codesandbox.io/s/withered-leaf-mv8lp