如何以砖石风格的pinterest显示引导卡？

Question

我已经在Bootstrap 4.6网格布局中创建了布局，但是在卡之间，行空间存在。因此，我想制作诸如Pinterest样式布局之类的网格布局卡。我在NUXT JS中使用了砖石层套件。下面给出的代码。

<template>
<div class="row mt-2 masonry-grid">
    <div class="col-md-3">
        <div class="card">
            <h5 class="card-header">
                Company Information
            </h5>
            <div class="card-body">
                <dl class="row mt-2" v-if="profileResult">
                    <dt class="col-sm-5">Name:</dt>
                    <dd class="col-sm-7">{{ profileResult.name }}</dd>

                    <dt class="col-sm-5">Ticker:</dt>
                    <dd class="col-sm-7">{{ profileResult.symbol }}</dd>

                    <dt class="col-sm-5">Exchange:</dt>
                    <dd class="col-sm-7">{{ profileResult.exchange }}</dd>

                    <dt class="col-sm-5">Industry:</dt>
                    <dd class="col-sm-7">{{ profileResult.industry }}</dd>

                    <dt class="col-sm-5">Sector:</dt>
                    <dd class="col-sm-7">{{ profileResult.sector }}</dd>

                    <dt class="col-sm-5">Website:</dt>
                    <dd class="col-sm-7">{{ profileResult.website }}</dd>
                </dl>
            </div>
        </div>
    </div>

    <div class="col-md-6">
        <div class="card">
            <h5 class="card-header">
                Stock Chart {{ this.price ? '(' + this.price + ')' : '' }}
            </h5>
            <div class="card-body p-0">
                <div id="container" ref="container" style="width: 100%; height: 100%;">
                </div>
            </div>
        </div>
    </div>

    <div class="col-md-3">
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">About Company</h3>
            </div>
            
            <div class="card-body">
                <div class="row">
                    <div class="col-sm-12">
                        <div class="mb-1 text-center">
                            <img :src="logoResult.url" alt='logo' v-if="logoResult && logoResult.url">
                        </div>
                    </div>
                    <div class="col-sm-12">
                        <p v-if="profileResult && profileResult.description">
                            {{ profileResult.description.substring(0, 650).concat('...') }}
                        </p>
                        <p v-else>
                            it is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-md-3">
        <div class="card">
            <h5 class="card-header">
                Dividends
            </h5>
            <div class="card-body p-0">
                <ul class="list-group">
                    <li class="list-group-item">An item</li>
                    <li class="list-group-item">A second item</li>
                    <li class="list-group-item">A third item</li>
                    <li class="list-group-item">A fourth item</li>
                    <li class="list-group-item">And a fifth one</li>
                </ul>
            </div>
        </div>
    </div>

    <div class="col-md-6">
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">Snowflake Analysis</h3>
            </div>
            
            <div class="card-body">
                <p>
                    Apple Inc. designs, manufactures, and markets smartphones, personal computers, tablets, wearables, and accessories worldwide.
                </p>
                <p>Rewards</p>
                <p>Earnings are forecast to grow 4.13% per year</p>
                <p>Earnings grew by 11.2% over the past year</p>
            </div>
        </div>
    </div>

    <div class="col-md-3">
        <div class="card">
            <h5 class="card-header">
                Financial Health
            </h5>
            <div class="card-body p-0">
                <ul class="list-group">
                    <li class="list-group-item">An item</li>
                    <li class="list-group-item">A second item</li>
                    <li class="list-group-item">A third item</li>
                    <li class="list-group-item">A fourth item</li>
                    <li class="list-group-item">And a fifth one</li>
                </ul>
            </div>
        </div>
    </div>

    <div class="col-md-8">
        <div class="card">
            <h5 class="card-header">
                Actionarsstrukture
            </h5>
            <div class="card-body">
                <template v-for="oneNews in news">
                    <a :href="oneNews.url" target="_blank" :key="oneNews.uuid">
                        <h6>
                            {{ oneNews.title }}
                        </h6>
                    </a>
                    <p :key="oneNews.uuid+'description'">
                        {{ oneNews.description }}
                    </p>
                </template>
                <template v-if="!news.length">
                    <h3>No news found.</h3>
                </template>
            </div>
        </div>
    </div>

    <div class="col-md-4">
        <div class="card">
            <h5 class="card-header">
                Future Growth
            </h5>
            <div class="card-body">
                <p>
                    Analyst Future Growth Forecasts
                </p>
                <p>Rewards</p>
                <p>Earnings are forecast to grow 4.13% per year</p>
                <p>Earnings grew by 11.2% over the past year</p>
            </div>
        </div>
    </div>
  </div>
</template>

<script>
import darkTheme from '../../plugins/dark'
import defaultTheme from "../../plugins/default";

export default {
    watch: {
        "$route": {
            handler: async function (to, from) {
                console.log('route watch', to, from);
                let { default: Masonry } = await import('masonry-layout');
                let grid = new Masonry('.masonry-grid', { 
                    percentPosition: true,
                    initLayout: false,
                });
            }, 
            deep: true,
            immediate: true
        }
    },
    mounted() {
        if (process.client) {
            this.loadMasonryLayout();
        }
    },
    methods: {
        async loadMasonryLayout() {
            let { default: Masonry } = await import('masonry-layout');
            let grid = new Masonry('.masonry-grid', { 
                percentPosition: true,
                initLayout: false,
            });
        }
    }
};

你能帮我吗？提前致谢。