Image gallery using JavaScript image array. 100% dynamically generated

You can do this in just 7 lines of JavaScript code and 9 lines of CSS code.

Rest is boilerplate HTML.

let container = document.querySelector('#imagegrid');
for(var i = 0; i < imgArray.length; i++) {
        let img = document.createElement('img');
        img.className = 'img';
        img.src = "Pictures/" + imgArray[i];
        container.appendChild(img);
}

Above is JavaScript of course. This is the magic.

Rest is usual grid layout CSS layout(Oh my, do I love grid or what?)

#imagegrid {
        display:grid;
        grid-template-columns: repeat(3, 1fr);
        grid-column-gap: 50px;
        grid-row-gap: 50px;
}
.img {
        height: 500px;
        width: 500px;
}

That is all.

I never knew life was this simple.

Nobody told me thus far.

Chrome devconsole shows images though the HTML clearly does not have a single img tag.

Chrome dev console

Long live JavaScript.