BigCommerce模具主题产品网格不一致地显示产品

Question

我注意到在Chrome和Safari（在Mozilla中可以正常工作）中，产品网格显示不一致。它应该一直向下显示每行4列。但是，在第三行中，它将仅显示2列，然后在其余方式中继续显示4列模式。

好像这个人在两年前有同样的问题，但从未得到答复：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);
            }
        }
    }
}