Bricks Theme for WooCommerce + Masonry Product Columns

I am new to Bricks so excuse my ignorance. I am trying to make the Products module on a Page appear with a masonry effect.

I am enquing both masonry.js and imagesloaded which are available via core Wordpress.

I am adding this custom JS script to attach masonry to my existing Bricks product element, which I have given the custom ID #masonry-for-bricks

jQuery(document).ready(function($) {
    var $grid = $('#masonry-for-bricks .products').masonry({
        // options
        itemSelector: '.product',
        columnWidth: '.product',
        percentPosition: true
    });

    // Layout Masonry after each image loads
    $grid.imagesLoaded().progress(function() {
        $grid.masonry('layout');
    });
});

It just dawned on me, that since I cannot find a lot of info out there from other Bricks users I would ask the question here... is there a simpler way to do this. The above code does not yield a great effect, with products tiling on each other and other chaos on window resize. Any thoughts?

Overriding the default styles got me there, the product element is added as a grid and there does not seem to be a simple way to undo this in Bricks editor. For anyone else in the future who may be stuck on this. First enqueue masonry.js then use the JS code previously shared along with this CSS and bingo, you will have a Bricks product element with masonry effect.

/* Custom Masonry Grid */
#masonry-for-bricks {
    display: block !important;
    position: relative !important;
    width: 100%;
    margin: 0 auto;
}

/* Masonry Item Styles */
#masonry-for-bricks .product {
    position: absolute !important;
    box-sizing: border-box !important;
    margin: 5px !important;  /* Set margin to control spacing */
    height: auto !important;
    border: 1px solid #ececec;
}

/* Wide Desktop (6 columns, 1600px and wider) */
@media (min-width: 1200px) {
    #masonry-for-bricks .product {
        width: calc(16.6666% - 10px) !important;  /* 6 columns */
    }
}

/* Tablet Landscape (4 columns) */
@media (max-width: 1199px) {
    #masonry-for-bricks .product {
        width: calc(25% - 10px) !important;  /* 4 columns */
    }
}

/* Tablet Portrait (3 columns) */
@media (max-width: 991px) {
    #masonry-for-bricks .product {
        width: calc(33.3% - 10px) !important;  /* 3 columns */
    }
}

/* Phone (2 columns) */
@media (max-width: 767px) {
    #masonry-for-bricks .product {
        width: calc(50% - 10px) !important;  /* 2 columns */
    }
}

Note that you must assign the product element div this id: #masonry-for-bricks, self explanatory I hope.

I have now turned this into a little plugin, if anyone else wants a quick way to enable masonry on Bricks Theme product elements.