CSS override JS

JavaScript
1

I’m not actually sure my title is correct.

I have this JS code that generates images from a directory.

In this code I want to add several images from other directory but give them specific places in my css grid.
The JS overrides this because of being launched after the css script.
I tried adding !important and inline css but nothing changes.

js code :

<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;
}
2

nobody nothing??

I can’t get this fixed. How can I make sure the grid-row is assigned to the non js written image??

3

Can you post your code on codepen (or similar)?
Because right now it’s hard to understand what you want to achieve.

4

That’s a really weird CSS you have there.

First of all, setting an image to display:grid makes no sense. How it works is: You have one grid-container that is set to grid, and all direct children inside that container automatically become grid-items that arrange themselves according to the columns and rows of the container-div:

<div class="grid-container">
    <img src="" alt="" />
    <img src="" alt="" />
    ...
</div>

Second, when you position stuff with grid, I wonder what you need float for.

5

As long as the elements are given the correct classes it should not matter when they are inserted into the DOM.

I don’t see any code that would place the individual images at specific locations. You have one class (.other ), but that doesn’t get added and it really doesn’t do anything to place each image at a different location in the grid. They would just get the same class and placement (if you actually added it).

If the class is meant for one specific image you have to identify the image (say by string, index, or key) and add the class just to that one image.

As said, it would be nice with a working example.