javascript - 覆盖 JS 的 CSS GRID 列或行

Question

我实际上不确定我的标题是否正确。

我有这个从目录生成图像的 JS 代码。

在这段代码中，我想从其他目录添加几个图像，但在我的 css 网格中给它们特定的位置。JS 覆盖了这一点，因为它是在 css 脚本之后启动的。我尝试添加 !important 和内联 css，但没有任何变化。

编辑：专门添加一个网格行或列的地方。正如在“21”类中一样，应该将 img 放在第 2 列第 1 行并始终在那里。

js代码：

<script async defer>
        var imagePath = "./img/seperate-";
        var numberOfImage = 208;

        var parentDIV = document.getElementsByClassName("grid-container-parent")[0];

        for (var i = 0; i < numberOfImage; i++) {
            var tempDIV = document.createElement('div');
            tempDIV.setAttribute('class', 'grid-container-parent', 'test');
            var innerHTML = `<img src='` + (imagePath + i) + `.png'></img>`
            tempDIV.innerHTML = innerHTML;
            parentDIV.appendChild(tempDIV);
        }
    </script>

html:

<div class="grid-container">
    <div class="grid-container-parent">
        <img class="other img" href="img2/other.img">
    </div>
</div> 

CSS：

.grid-container {
    display: grid;
    height: 400px;
    width: auto;
    grid-template-columns: repeat( auto-fit, minmax(90px, 1fr));
    grid-template-rows: repeat( auto-fit, minmax(120px, 1fr));
    margin: 0;
}

.grid-container-parent img {
    display: grid;
    gap: 0px 0px;
    height: 115px;
    width: 98.44px;
    object-fit: cover;
    float: left;
    grid-column: auto;
}

.other {
    display: grid;
    gap: 0px 0px;
    height: 115px;
    width: 98.44px;
    object-fit: cover;
    grid-column: 22 !important;
    grid-row: 4 !important;
}

标签： javascriptcss-grid