Add masonry style to the Remote Template list

This article will show you how to transform the remote templates list of Bricks in a masonry style without cropping your images – it will allow you to see the entire template’s image before importing it.

Preview

Before

After

CSS

Custom CSS for the editor interface can be entered in Bricks → Settings → Builder → Builder Mode: Custom → Save Settings → Builder Mode (Custom) text area.

/* Masonry Template View */
#bricks-popup ul.bricks-layout-wrapper{
    column-count: 1;
    display: block;
    gap: 0;
}
#bricks-popup li.bricks-layout-item {
    width: 100% !important;
    break-inside: avoid;
}
#bricks-popup .bricks-layout-item-inner.has-img {
    height: 100% !important;
    min-height: 200px;
}
#bricks-popup.templates img {
    height: 100% !important;
}
@media screen and (min-width: 768px){
    #bricks-popup ul.bricks-layout-wrapper {
        column-count: 2;
    }
}
@media screen and (min-width: 1200px){
    #bricks-popup ul.bricks-layout-wrapper {
        column-count: 3;
    }
}