leaflet map shows up grey

try this when page load;

setTimeout(function () {
    window.dispatchEvent(new Event('resize'));
}, 1000);

Another thing to watch.

If you check the network tab and the map tiles are loading ok, yet the map still remains grey, it can be due to CSS contamination from your surrounding page.

In my case it was:

img {
    max-height: 100%;
}

Fixed by overriding with:

.my-leaflet-map-container img {
    max-height: none;
}

You need to implement the next section of the Quick Start Guide: you've initialized the map, but haven't added any tile layers to it, hence gray. So read on to the section beginning with Next we’ll add a tile layer to add to our map.