Как сделать раскладку товара в виде masonry галереи Tilda

Как сделать раскладку товара в виде masonry галереи Tilda

1
Создали блок с товарами ST300 и задали ему класс uc-product-masonry
2
Добавили код в блок Т123 на страницу
Библиотека для примера

<style>
.uc-product-masonry .t-clear.t-store__grid-separator {
    display: none;
}
.uc-product-masonry .t-store__card__imgwrapper.t-store__card__imgwrapper_original-ratio {
    padding-bottom: 0;
}
.uc-product-masonry img.js-product-img.t-store__card__img {
    position: static;
}
.uc-product-masonry .js-product.t-store__card.t-col {
    margin-bottom: 20px;
}    
.uc-product-masonry img.js-product-img {
    border-radius: 20px;
}
.uc-product-masonry .t754 .t-store__card__btns-wrapper {
    margin-top: 5px;
}
.uc-product-masonry .t-store__card__textwrapper {
    padding-top: 10px;
}
.uc-product-masonry .t-store__card__descr {
    margin-top: -2px;
}

@media screen and (min-width:980px){
    
.uc-product-masonry .js-store-grid-cont.t-store__grid-cont,
.uc-product-masonry .js-store-parts-select-container.t-store__grid-cont{
    max-width: 60vw;
}

.uc-product-masonry .js-product.t-store__card.t-col {
    max-width: calc(50% - 40px);
}
}



@media screen and (max-width: 670px){
.uc-product-masonry .t-store__card__btn {
    width: auto;
}
}

@media screen and (max-width: 640px){
.uc-product-masonry .t-store__grid-cont_mobile-grid {
    padding: 0;
}
.uc-product-masonry .t-store__card__btns-wrapper{
    display: none;
}

.uc-product-masonry .js-product.t-store__card.t-col {
    margin-bottom: 0px;
}    

.uc-product-masonry .t-store__grid-cont_mobile-grid .t-col {
    padding-left: 5px;
    padding-right: 5px;
}


}

</style>

<script src="https://npmcdn.com/masonry-layout@4.0/dist/masonry.pkgd.min.js"></script>
<script src="https://npmcdn.com/imagesloaded@4.1/imagesloaded.pkgd.min.js"></script>

<script>
$(document).ready(function(){ 
    
$('.uc-product-masonry .js-store-grid-cont').on('tStoreRendered', function() {
  
    
    $('.uc-product-masonry .js-store-grid-cont').removeData('masonry');
    
	let $grid = $('.uc-product-masonry .js-store-grid-cont ').masonry({
	    itemSelector: '.js-product.t-store__card.t-col',
        singleMode: false,
	    isResizable: true,
	    isAnimated: true,
            animationOptions: { 
	        queue: false, 
	        duration: 1500 
	    }
    }); 
    

$grid.imagesLoaded().progress( function() {
    $grid.masonry('layout');
});
    

});
	
});
</script>
Made on
Tilda