如何获得等间距的CSS网格砌体布局？

Question

所以我用this教程为我的网站创建了一个基于CSS网格的砌体布局。我只有一个问题，我的divs之间的间距不均匀，我不知所措，无法找到解决此问题的方法。

下面是我的js。我做了一些较小的编辑，例如不使用imagesLoaded库，但我认为这没有什么不同。

var counter = 0;
    var grid = document.getElementsByClassName("mod_catalogUniversalView")[0];
    var images = grid.getElementsByTagName("img");

    function resizeGridItem(item) {
        if (grid.hasChildNodes('ctlg_teaser')) {
            grid.classList.add('list_grid');
        }
        var rowHeight = parseInt(window.getComputedStyle(grid).getPropertyValue('grid-auto-rows'));
        var rowGap = parseInt(window.getComputedStyle(grid).getPropertyValue('grid-row-gap'));
        var rowSpan = Math.ceil((item.querySelector('.ctlg_entity').getBoundingClientRect().height + rowGap) / (rowHeight + rowGap));
        item.style.gridRowEnd = "span " + rowSpan;
    }

    function imagesLoaded() {
        counter++;
        if (counter === images.length) {
            return true;
        }
    }

    function resizeAllGridItems() {
        var allItems = document.getElementsByClassName("ctlg_teaser");
        for (var x = 0; x < images.length; x++) {
            if (images[x].complete) {
                imagesLoaded();
            } else {
                images[x].addEventListener('load', imagesLoaded, false);
            }
        }

        if (imagesLoaded) {
            for (var x = 0; x < allItems.length; x++) {
                resizeGridItem(allItems[x]);
            }
        }
    }

    window.onload = resizeAllGridItems();
    window.addEventListener("resize", resizeAllGridItems);

    $(document).ready(function() {
        if (imagesLoaded) {
            $('.ctlg_teaser').fadeTo(500, 1);
        }
    });

下面是我的css类的list_grid：

display: grid;
grid-row-gap: 5px;
grid-column-gap: 10px;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
grid-auto-rows: 10px;

添加一些屏幕截图：

Answer 1

如果我清楚地了解您，则需要更改此内容

grid-row-gap: 5px;
grid-column-gap: 10px

FOR：

grid-gap: 5px;或更多像素（如果需要）；

因为您对行和列使用了不同的间隙大小，所以间隙不相同。