Как получить 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;

Добавьте несколько скриншотов:

Answer 1

Если я вас четко понимаю, вам нужно изменить это

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

FOR:

grid-gap: 5px; или более px, если вам нужно;

Поскольку вы используете разные размеры зазоров для строк и столбцов, поэтому у вас не будет одинакового зазора.