Leaflet grid

HTML

<script src="//cdn.leafletjs.com/leaflet/v1.2.0/leaflet.js"></script>
<link rel="stylesheet" href="//cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css">
<script src="//npmcdn.com/@turf/[email protected]/turf.min.js"></script>
<div id="map"></div>

CSS

#map {
  height: 500px;
}

JavaScript

var map = L.map("map").setView([55.554, 37.705], 16);

L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
  attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

var poly = {"type":"FeatureCollection","features":[{"type":"Feature","properties":{},"geometry":{"type":"Polygon","coordinates":[[[37.70651578903198,55.55151096909941],[37.70958423614502,55.555297797727704],[37.709230184555054,55.555850013083],[37.70885467529296,55.55615949302079],[37.70013213157654,55.55376247689539],[37.69975662231445,55.55329519343182],[37.70651578903198,55.55151096909941]]]}}]};

var polyLayer = L.geoJSON(poly).addTo(map);


// GRID
var bbox = polyLayer.getBounds().toBBoxString().split(',').map(Number);
console.log(bbox);
var cellSide = 0.01;
var mask = polyLayer.toGeoJSON().features[0];
var options = {
    units: 'kilometers',
    mask: mask
};

var squareGrid = turf.squareGrid(bbox, cellSide, options);

var gridLayer = L.geoJSON(squareGrid, {color: "red", weight: 1, fill:0}).addTo(map);
map.fitBounds(gridLayer.getBounds());

// Bbox
L.rectangle(polyLayer.getBounds(), {color: "#ff0000", weight: 2, fill:0}).addTo(map);