Сетка продуктов на тему трафарета BigCommerce

Question

Я заметил, что в Chrome и Safari (он отлично работает в Mozilla) сетка продуктов отображается непоследовательно.Предполагается отображать 4 столбца в каждой строке вниз.Тем не менее, в 3-й строке он будет отображать только 2 столбца, а затем продолжать шаблон из 4 столбцов до конца.

Похоже, у этого человека был тот же вопрос 2 года назад, но он не получил ответа: https://support.bigcommerce.com/s/question/0D51B00004G4p2NSAR/inconsistent-and-unaligned-product-grid-with-stencil-theme

Мы используем трафаретную тему BigCommerce, а внутри папок темы находятся ресурсы> scss> макеты> продукты> ._productGrid.scss

Я пытался в них разобратьсяфайлы и указание, где проблема, но мне не ясно, и я не решаюсь вносить какие-либо изменения, поскольку это живой сайт (я бы использовал CLI для локальных изменений, но мой персональный компьютер не может, так как BigCommerceиспользует более старую версию Node, и в настоящее время я не желаю возвращаться к более старой версии).Итак, глядя на этот файл scss, кто-нибудь может сказать мне, почему он будет делать это специально в Chrome и Safari?

// =============================================================================
// PRODUCT GRID (CSS)
// =============================================================================


// Product grid view
// -----------------------------------------------------------------------------
//
// 1. Re-set the font-size, as we're reducing it to 0 in the .products class.
//
// -----------------------------------------------------------------------------

.productGrid {

    @include u-listBullets("none");
    @include grid-row($behavior: "nest");
    font-size: 0; // 1
    margin-bottom: spacing("single");

    .product {
        @include grid-column(6);
        display: inline-block;
        font-size: fontSize("base"); // 1
        vertical-align: top;

        @include breakpoint("small") {
            width: grid-calc(4, $total-columns);
        }

        @include breakpoint("medium") {
            width: grid-calc(3, $total-columns);
        }
    }
}


// Product when sidebar is present
// -----------------------------------------------------------------------------
//
// 1. When the sidebar is visible, reduce products to 3 across.
//
// -----------------------------------------------------------------------------

.page-sidebar + .page-content {

    .productGrid {
        // scss-lint:disable SelectorDepth, NestingDepth
        .product { // 1
            @include breakpoint("small") {
                width: grid-calc(4, $total-columns);
            }
        }
    }

}


//
// Product Grid with masonry layout
//
// Purpose: Display products in a masonry grid, with a display inline-block for
// older browsers that don't support css multicolumn
//
// 1. Some older browser support. This class comes from Modernizr
// -----------------------------------------------------------------------------

.productMasonry {
    column-count: 2;
    column-fill: auto;
    column-gap: remCalc(20px);
    margin: 0 0 spacing("single");
    overflow: hidden;

    @include breakpoint("small") {
        column-count: 3;
    }

    @include breakpoint("medium") {
        column-count: 4;
    }

    .product {
        break-inside: avoid;
        display: block;
        margin-bottom: spacing("double");
        padding: 0;
        width: 100%;
    }

    .card {
        margin: 0;
    }

    .no-csscolumns & { // 1
        @include u-listBullets("none");
        @include grid-row($behavior: "nest");
        font-size: 0;

        // scss-lint:disable SelectorDepth, NestingDepth
        .product {
            @include grid-column(3);
            display: inline-block;
            font-size: fontSize("base"); // 1
            vertical-align: top;
        }

        .card {
            margin: 0;
        }
    }
}


// Product grid view variation
// -----------------------------------------------------------------------------

.productGrid--maxCol6 {
    .no-csscolumns & {
        // scss-lint:disable SelectorDepth, NestingDepth
        .product {
            @include breakpoint("medium") {
                width: grid-calc(2, $total-columns);
            }
        }
    }

    .csscolumns & {
        @include breakpoint("medium") {
            column-count: 6;
        }
    }
}

.productGrid--maxCol3 {
    .no-csscolumns & {
        // scss-lint:disable SelectorDepth, NestingDepth
        .product {
            @include breakpoint("medium") {
                width: grid-calc(4, $total-columns);
            }
        }
    }

    .csscolumns & {
        @include breakpoint("medium") {
            @include grid-column(12);

            // scss-lint:disable SelectorDepth, NestingDepth
            .product {
                @include grid-column(4);
            }
        }
    }
}