javascript - 如何获得等间距的css网格砌体布局？

Question

所以我使用本教程为我的网站创建了一个基于 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;

添加一些截图：

标签： javascripthtmlcsscss-grid

Answer 1

如果我清楚地理解你，你需要改变这个

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

为了：

grid-gap: 5px;如果需要，或更多 px；

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