Как заставить контейнеры реорганизоваться на исчезновение других в Vue?

Question

У меня есть проект Vue, в котором я отображаю информацию обо всех проектах, размещенных на экземпляре GitLab, например, имя, идентификатор, ... и, что наиболее важно, связанные конвейеры и их расписания.

Я знаюкак отобразить все проекты (1 проект = 1 карта) и изменить их поведение CSS в зависимости от их свойств.Например, серые карты ниже соответствуют проектам без запланированных конвейеров, а синие имеют некоторые запланированные конвейеры:

Теперь я хотел быпредложить пользователю альтернативный вариант, позволяя ему установить флажок для отображения проектов только с запланированными конвейерами.

На странице отображения карточек я добавил флажок:

<template>
  <input
    type="checkbox"
    name="showOnlyScheduled"
    value="false"
    id="checkbox-style"
    v-model="checked"
  >
  Show only projects that have scheduled pipelines

  <div class="row">
    <div
      class="col-sm-12 col-md-4 col-lg-3"
      id="card-grid"
      v-for="project in projects"
      :key="project.id"
    >
      <Schedules
        :projectName="project.name"
        :projectId="project.id"
        :projectUrl="project.web_url"
        :checkBoxChecked="checked"
      ></Schedules>
    </div>
  </div>
</template>

Ив карточке обработки файлов отображается:

<template>
  <div>
    <div
      class="card card-block"
      id="card-style"
      :class="{ 'has-no-pipelines': !hasPipelines(), 'has-pipelines': hasPipelines(), 'disable-card': !hasPipelines() && checkBoxChecked}"
    >
      <div class="card-block">
        <h5 class="card-title">
          <a
            id="title-link"
            :href="projectUrl"
            target="_blank"
            rel="noopener noreferrer"
          >{{ projectName }}</a>
        </h5>
        <div class="card-text">
          <div v-if="this.schedules.pipelines.length > 0">
            <div v-for="(pipeline,index) in schedules.pipelines" :key="index" id="schedules">
              <p>
                <a
                  :href="projectUrl + '/pipeline_schedules'"
                  id="link-schedules"
                  target="_blank"
                  rel="noopener noreferrer"
                >Pipeline #{{ pipeline.id }}</a>
                - {{ pipeline.description }}
              </p>
            </div>
          </div>
          <div v-else id="no-schedules">
            <div>
              <div>No scheduled pipelines yet.</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Schedules",
    props: {
      projectName: String,
      projectId: Number,
      projectUrl: String,
      checkBoxChecked: {
        type: Boolean,
        default: false
    }
  },
  data() {
    return {
      schedules: {}
    };
  },
  mounted() {
    this.GitLabAPI.get(
      "/projects/" + this.projectId + "/pipeline_schedules",
      {},
      [this.schedules, "pipelines"]
    );
  },
  methods: {
    hasPipelines() {
      if (this.schedules.pipelines.length > 0) return true;
      else return false;
    }
  }
};
</script>

<style scoped>
  .has-pipelines {
    background-color: #1565c0 !important; /* blue */
  }

  .has-no-pipelines {
    background-color: #424242 !important; /* grey */
  }

  .disable-card {
    visibility: hidden;
    display: none;
    opacity: 0;
  }
</style>

Этот код действительно приводит к исчезновению карточек без запланированных конвейеров ... но карточки не реорганизуются, чтобы быть рядом друг с другом:

Полагаю, карты не выравниваются, потому что, хотя я отключаю некоторые свойства CSS, это не приводит к исчезновению контейнеров из DOM.

Как я могу выровнять карты после того, как некоторые из них исчезли?