Why is there a small pixel gap between tiles in CSS grid when gap is set to 0 (responsive map)?

I am trying to create a game level select map where I need different sprites from a spritesheet placed on a very specific tile in a grid. I use CSS grid for this and place the tiles on the grid inline with grid-row-start and grid-column-start. Everything works as it should, except for one thing: the tiles have a small gap between them, but gapis set to 0 in the CSS. That small gap is enough to look really jarring (screenshot of map with the gap).

Because this is a mobile game, it is important that the grid is responsive and works on all device sizes. I am therefore working in percentages, and vw in the CSS. I am thinking that the gaps might be caused by decimal rounding errors?

The parent div:

.tilemap {
    display: grid;
    height: 150vw; /* 15 rows, 10 columns */
    grid-template-rows: repeat(15, 1fr);    /* 15 rows */
    grid-template-columns: repeat(10, 1fr); /* 10 columns */
    gap: 0;
    place-content: stretch end;
}

The grid is full width (100vw) and each tile is 10vw = 10 columns. The height of the tilemap is 150vw = 15 rows. Each tile is squared (screnshot of CSS grid in devtools).

Common class for all tiles:

.tilemap div {
    max-width: 100%;
    background-size: 100%;
    background-image: url("../images/responsive-spritesheet.png");
}

And each tile has a different background position. Included for completeness:

.tilemap div.road.vertical {
    background-position: 0 100%;
}

The problem is not the spritesheet image, because the gaps still appear when I comment this out and replace it with background-color instead (screenshot).

Any help is greatly appreciated.