Why is my CSS grid-template-columns stacking and not being consistent - html

Question

So I have these carousel thumbnails that supposedly keep adding to the right until each of them reached the width of 120px and they'll go into the next row. These thumbnails are wrapped by a wrapper which its width fits its content.
HTML:
<div class="carousel-thumbnail-wrapper">
<div class="carousel-thumbnail mod-active">
<img src="./img/project-slider-1.jpg" alt="">
</div>
<div class="carousel-thumbnail">
<img src="./img/project-slider-2.jpg" alt="">
</div>
</div>
CSS:
.cg-carousel > .carousel-thumbnail-wrapper {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
column-gap: 8px;
width: fit-content; /** the width fits its content... */
max-width: 100%; /** ...but can only grow not more than 100% of its parent's */
}
.cg-carousel > .carousel-thumbnail-wrapper > .carousel-thumbnail {
box-sizing: border-box;
border-radius: var(--border-radius-xs);
cursor: pointer;
position: relative;
margin-bottom: 8px;
max-width: 200px; /** each thumbnail has maximum 200px width */
}
Normally, if everything goes right it will show like this: Images keep adding to the right
It does work like that sometimes. But when I refresh the page or go to another page back to back, for some reason they're stacking, like this: Images suddenly stacking
What did I do wrong?

Answer 1

So your code isn't wrong per se, but your selectors are a little off, and your images need a width of 100%, otherwise they will not resize - their parent will, but they will still remain their original size. So if you change your selectors so that they actually target the elements in your html, and set the width of the images to 100%, it should work perfectly. The javascript in my other answer makes your code fully fool-proof as it combats any css issues older browsers may face. But if old browsers are not a problem, then use this answer. Below is a snippet. Here is a jsfiddle link if you want to resize the viewport, add images or play with the code in general: https://jsfiddle.net/258b9x6e/1/
.carousel-thumbnail-wrapper {width: 100%}
.carousel-thumbnail-wrapper {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
column-gap: 8px;
width: fit-content; /** the width fits its content... */
max-width: 100%; /** ...but can only grow not more than 100% of its parent's */
}
.carousel-thumbnail {
box-sizing: border-box;
border-radius: var(--border-radius-xs);
cursor: pointer;
position: relative;
margin-bottom: 8px;
max-width: 200px; /** each thumbnail has maximum 200px width */
}
img {
width: 100%;
}
<div class="carousel-thumbnail-wrapper">
<div class="carousel-thumbnail mod-active">
<img src="https://via.placeholder.com/200" alt="">
</div>
<div class="carousel-thumbnail">
<img src="https://via.placeholder.com/200" alt="">
</div>
</div>

Answer 2

The following snippet will resize the images, to make them small enough to be able to fit on one row, until they are 120px in width, which is when they will no longer be shrunk, but moved to the next row. This achieves the same results as my other answer, but also works on older browsers, at the expense of having to use JS. My other answer only works on newer browsers but does not need any JS.
Here, I've used 3 imgs but you can use as many as you would like This is also responsive, so you can resize your browser and the images will still fit well.
document.querySelectorAll("img")[document.querySelectorAll("img").length-1].onload = re_calculate_image_width;
function re_calculate_image_width() {
let count = document.querySelectorAll(".img-wrapper").length;
document.querySelector(".outer-wrapper").style.setProperty("--how-many", (count).toString());
}
alert("Important: Read this: \n If you dynamically add more images, you MUST call the ***re_calculate_image_width*** function when the added images have finished ***loading***.");
.outer-wrapper {
width: 100%;
background: rgba(255,255,0,0.6);
--how-many: 5;
}
.img-wrapper {
display: inline-block;
min-width: 120px;
max-width: 200px;
width: calc(90% / var(--how-many));
height: auto;
}
img {
display: inline-block;
margin: 0px;
padding: 0px;
height: 100%;
width: 100%;
box-shadow: 0px 0px 1px 1px #000;
}
<div class="outer-wrapper">
<div class="img-wrapper">
<img src="https://via.placeholder.com/200" alt="">
</div>
<div class="img-wrapper">
<img src="https://via.placeholder.com/200" alt="">
</div>
<div class="img-wrapper">
<img src="https://via.placeholder.com/200" alt="">
</div>
</div>