I use leafletjs to make a interactive map. I have a fixed list of URLs to use and I can not change the URLs. I want to make a map with those tiles always in the same place and in the place I want them to be.

Tile0 is in (0, 0)

Tile1 is in (0, 1) and so on. How do I decide where each tile goes?

    var i = 0;
    L.TileLayer.CustomUrlLayer = L.TileLayer.extend({
        getTileUrl: function(coords) {
            var x = i;
            var y = i;
            i = i + 1;
            return `https://example.com/${y}-${x}.png`;
        }
    });

    L.tileLayer.myLayer = function(templateUrl, options) {
        return new L.TileLayer.MyLayer(templateUrl, options);
    }

    var map = L.map('map').setView([0, 0], 18);
    L.tileLayer.myLayer('', {
        attribution: 'My Map',
        maxZoom: 18,
        noWrap: true,
        tileSize: 256,
    }).addTo(map);

This snippet show my current leafletjs map. The tiles are placed wherever and it depends on the screen size. It changes if my Google Chrome window is smaller and so on. The correct images are loaded.

Tile0 Tile1 Tile2 Tile3

Tile4 Tile5 Tile6 Tile7

... always regardless of the screen. How?