I can show you that screen on every single browser you want to mention.
Get rid of that js nonsense and add the gap or margin as already mentioned.
You are making the common mistake of looking at your own screen and thinking that everyone else is seeing the same thing. Your screen is only displaying correctly because it happens to be at the width that makes it look like that. If you grab the edge of your browser window and drag it a little smaller you will see that your screen now breaks and the images butt together.
You just need to add the margin (or the gap property that we have mentioned and then all browsers will get the correct display for their resolution and available space.
I was not missing the point; I am neurodivergent; I have a vastly different brain wavelength that causes me to communicate differently than what most neurotypical people are used to.
I was trying to accommodate the fact that the images per row were scrunched together based on what was said, and because the images are painted after the fact via a React component, I was trying to incorporate Javascript into the component that would help with the margins (or padding) in this case.
I don’t write JS “nonsense”.
Nonetheless, I may have found a solution based on what I read earlier involving CSS using a smaller margin, and, after zooming in and out of the screen in both Chrome and Edge, I was able to verify that spaces between images appeared from 100% to 50% (any smaller, you’re on your own, but it does have very separate handlings for devices <= 800px),
I meant nonsense in the sense that its not needed at all and because it would only make matters worse
That has absolutely nothing at all to do with your problem.
There is no problem with edge or any of the browsers. They all butt the image together depending on the width of the browser. The solution is to add a margin to the game-thumb as shown or use the gap property on the gallery element. Adding a margin to the gallery element does nothing other than change the available width but the problem is still there.
Unfortunately that is doing nothing to alleviate the problem and is in fact worse.
Why is it that you won’t try the fix that I gave? What is it that you don’t like?
You can reduce the margin down smaller as required but the only way to stop the images touching at various widths is to give them a margin (or use the gap property on .gallery).
Anything else you come up with will not be correct because the issue is simply about the amount of space available.
Ok, I implemented @ralphnm 's suggestion regarding usage of .gap CSS class, and, at least for me, it looks great in Chrome (6 images per row spaced evenly), and looks good in Edge and Firefox at 5 images per row spaced evenly, All browsers have evenly spaces images from 100% to as low as 50%.
