我正在尝试使用Vue制作扩展卡，问题是扩展卡时，右侧的卡会创建一个空白空间答案

【问题标题】：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我正在尝试使用Vue制作扩展卡，问题是扩展卡时，右侧的卡会创建一个空白空间
【发布时间】：2021-12-07 15:01:47
【问题描述】：

我正在尝试使用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>

【问题讨论】：

标签： javascript html vue.js vuetify.js

【解决方案1】：

我认为你的问题是 CSS 而不是 Vue。

一种方法是用columns 制作一个flex 容器，每个容器包含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

【讨论】：