JSFiddle - React, Tailwind, and code Playground

by ian_smithz

HTML

<div id="myDIV" style="height:500px;width:500px;background-color:grey;position:absolute;">

</div>

CSS

.gridlines {
  display: none;
  position: absolute;
  background-color: #ccc;
  opacity: 0.6;
  filter: alpha(opacity=60);
  /* For IE8 and earlier */
}

JavaScript

$(document).ready(function () {
  var i,
    sel = $('#myDIV'),
    size = 25,
    height = sel.height(),
    width = sel.width(),
    ratioW = Math.floor(width / size),
    ratioH = Math.floor(height / size);
  for (i = 0; i <= ratioW; i++) { // vertical grid lines
    $('<div />').css({
        'top': 0,
        'left': i * size,
        'width': 0,
        'border-left': '1px solid #ccc',
        'height': height
      })
      .addClass('gridlines')
      .appendTo(sel);
  }

  for (i = 0; i <= ratioH; i++) { // horizontal grid lines
    $('<div />').css({
        'top': i * size,
        'left': 0,
        'width': width,
        'border-top': '1px solid #ccc',
        'height': 0
      })
      .addClass('gridlines')
      .appendTo(sel);
  }
  $('.gridlines').show();
})