Css 如何从固定的行高制作砌体样式

我想在bootstrap中将这张卡制作成砖石风格，你可以看到下面的列具有相同的高度，但我想要流畅的高度，卡必须具有与蓝线相同的边距。我尝试了。卡列和砖石风格（列数：4），但它根本不起作用

这是我的密码

                                <div class="col-12 col-lg-8 col-xl-9 col-right">
                                <div class="row listing-card-container">
                                    
                                {% for loop %}
                                    <div class="col-sm-5 col-lg-5 col-xl-3 mb-4">

                                        <div class="card">
                                            <div class="position-relative shadow-sm">
                                                <a href="........"><img class="card-img-top"
                                                        src="...." alt="Card image cap"></a>

                                            </div>
                                            <div class="card-body">
                                                <a href="..link..">
                                                    <h6 class="mb-3 listing-heading ellipsis">
                                                        ..content..
                                                    </h6>
                                                </a>
                                                <footer>
                                                    <p class="text-muted text-small mb-0 font-weight-light">
                                                        ..date..</p>
                                                </footer>
                                            </div>
                                        </div>
                                    </div>
                                {% endfor %}

                                </div>
                            </div>

{%for循环%}

…日期
{%endfor%}

谢谢。

看起来是-

.mashine{
显示器：flex；
柔性流：柱包裹；
最大高度：800px；
左边距：-8px；/*排水沟的调整*/
宽度：100%；
}
.砖石{
边距：0 8px 8px 0；/*一些排水沟*/
}

请不要只发布代码作为答案，还要解释代码的作用以及如何解决问题。带有解释的答案通常更有帮助，质量更好，更容易吸引选票。