How can I prevent gap property lines in a grid container from being erased when zooming out?

I have a container div with 16 divs inside.
I have applied the gap property with 1 px both horizontally and vertically.
I created 4 columns and 4 rows, so that the container was 4 x 4.

This is the code:

HTML

<div id="container">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>

CSS

#container {
 display: grid;
 background-color: #696969;
 border: 1px solid #000;
 width: 500px;
 height: 500px;
 grid-template-columns: repeat(4, 1fr);
 grid-template-rows: repeat(4, 1fr);
 gap: 1px;
}

#container div {
 background-color: #fff;
}

100% default zoom.

Zoom 120%

Zoom 80%

You can see that at 120% zoom the vertical gap is larger in the middle line. On the other hand, at 80% zoom several lines of the gap disappear.

How can I avoid this behavior?