I tried adding a gridlayer, but that obviously scales the grid lines with the tiles rather than being fixed to the coordinate system. I want to add a simple grid of lines based on the coordinate system so it is independent from the zoom levels to show the individual coordinates. Ideally I would want to show the coordinate as well and only present them at lower zoom levels.

Could I just add this to the tiles as overlays? How can I set a zoom level cutoff for that?

Code I already have:

var TileLayer = L.TileLayer.extend({
    getTileUrl: function (coords) {
        var data = {
            r: L.Browser.retina ? '@2x' : '',
            s: this._getSubdomain(coords),
            z: this._getZoomForUrl()
        };

        var tilepoints = Math.pow(2, data['z'] - 1);
        data['x'] = tilepoints * coords.x;
        data['y'] = tilepoints * (Math.abs(coords.y) - 1);

        return L.Util.template(this._url, L.extend(data, this.options));
    }
});
var tiles = new TileLayer(baseurl + "/{z}-{x}-{y}.png", {
    crs: L.CRS.Simple,
    minZoom: MIN_ZOOM_LEVEL,
    maxZoom: MAX_ZOOM_LEVEL,
    zoomOffset: 1,
    zoomReverse: true,
    bounds: [[0, 0], [1048576, 1048576]],
});

var map = L.map(mapDiv, {
    crs: L.CRS.Simple,
    minZoom: MIN_ZOOM_LEVEL,
    maxZoom: MAX_ZOOM_LEVEL,
    maxBounds: [[0, 0], [1048576, 1048576]],
    layers: [tiles]
});