适用于不同尺寸卡片的 Bootstrap 5 布局 - 如 Pinterest

I am building a web that would use Bootstrap 5, the web would have a section which displays several cards like this

如您所见，每张卡片可能有不同的尺寸（取决于描述和缩略图）

我如何让它们变得紧凑，就像 Pinterest 主页一样

我需要使用什么类（在 bootstrap 5 中），或者什么布局

As Bootstrap 5 文档中进行了解释 https://getbootstrap.com/docs/5.0/components/card/#masonry，Masonry JS 插件是此类“Pinterest”布局的推荐选项。 Bootstrap 4 中使用的多列卡片布局（卡片列）在 Bootstrap 5 中不再可用。

使用 Masonry 插件很简单。只需使用适当的col-*类来设置列数，然后data-masonry包含的属性row...

<div class="container">
    <div class="row" data-masonry='{"percentPosition": true }'>
        <div class="col-*">
            ...
        </div>
    </div>
</div>

https://codeply.com/p/yrjCBwUeKR https://codeply.com/p/yrjCBwUeKR

Note：CSS 网格砌体（即：grid-template-rows: masonry;其他人提到的 ) 选项目前仅适用于 Firefox，并且还不是推荐的选项。