4×4网格画廊显示异常求助：移动端正常，Isotope配置调整无效

我正在开发画廊功能，该画廊采用4×4网格布局，但网格显示异常，移动端显示正常。尝试调整Isotope配置、修改服务端代码均未解决问题，无法定位具体故障。

问题截图 #

服务端代码片段 #

else {

    $ks = 0;

    $getAllImagesByCategoryId = $user->getAllImagesByCategoryId($getImageCategoryDetailById['id']);


    while ($getAllImagesNVideosRow = $user->fetch($getAllImagesByCategoryId)) {

        $file_name = str_replace('', '-', strtolower(pathinfo($getAllImagesNVideosRow['image_name'], PATHINFO_FILENAME)));
        $ext = pathinfo($getAllImagesNVideosRow['image_name'], PATHINFO_EXTENSION);
?>
        <div class="grid-item col-sm-3 grid-item--height2 gallery-image" data-category="photo-galleryimage" <?php if ($ks % 4 == 0)  ?>>

            <a class="popup-image" data-fancybox="images" data-caption="<?php echo $getAllImagesNVideosRow['description']; ?>" href="<?php echo BASE_URL; ?>/images/gallery/<?php echo $file_name . '_large.' . $ext; ?>" data-rel="lightcase:photoGallery">
                <img src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-title="<?php echo $getAllImagesNVideosRow['description']; ?>" data-src="<?php echo BASE_URL; ?>/images/gallery/<?php echo $file_name . '_crop.' . $ext; ?>" alt="<?php echo $getAllImagesNVideosRow['events_title']; ?>">

            </a>
            <div class="item-content">
                <h3><?php echo $getAllImagesNVideosRow['events_title']; ?></h3>
                <span> <?php echo date("d-M-Y", strtotime($getAllImagesNVideosRow['created'])); ?></span>
            </div>
        </div>

<?php

    }
?>
<?php
}

?>

多次调整Isotope配置仍未解决问题，无法确定具体故障原因。

内容的提问来源于stack exchange，提问作者Pratik zajam