Draw a grid on a page

Bookmarklet

javascript:(function(a,b,c,d){d=jQuery.extend({offsetX:0,offsetY:0},d||{});var e=jQuery(c).outerHeight(),f=jQuery(c).outerWidth(),g=jQuery(c).position().left,h=jQuery(c).position().top,i=function(a,b,c,d,e){jQuery("<div>").addClass("grid").css("position","absolute").css("left",a+"px").css("top",b+"px").css("width",c+"px").css("height",d+"px").css(e,"1px solid rgba(0,0,0,0.2)").css("z-index","1000000").appendTo(jQuery("body"))};jQuery(".grid").remove();for(var j=h+d.offsetY;j<=h+e-d.offsetY;j+=b)i(g+d.offsetX,j,f-2*d.offsetX,0,"border-bottom");for(var j=g+d.offsetX;j<=g+f-d.offsetX;j+=a)i(j,h+d.offsetY,0,e-2*d.offsetY,"border-right")})(10,18,"#content",{offsetX:15,offsetY:0})

Draw a grid on a page

(function(gridX, gridY, containerSelector, options) {
  options = jQuery.extend({
    offsetX: 0,
    offsetY: 0
  }, options || {})

  var height = jQuery(containerSelector).outerHeight()
    , width  = jQuery(containerSelector).outerWidth()
    , left   = jQuery(containerSelector).position().left
    , top    = jQuery(containerSelector).position().top
    , draw   = function(x, y, w, h, border) {
        jQuery("<div>")
          .addClass("grid")
          .css("position", "absolute")
          .css("left", x + "px")
          .css("top", y + "px")
          .css("width", w + "px")
          .css("height", h + "px")
          .css(border, "1px solid rgba(0,0,0,0.2)")
          .css("z-index", "1000000")
          .appendTo(jQuery("body"))
      }

  jQuery(".grid").remove()

  // draw horizontal
  for(var i = (top + options.offsetY); i <= (top + height - options.offsetY); i += gridY) 
    draw(left + options.offsetX, i, width - 2*options.offsetX, 0, "border-bottom")

  // draw vertical
  for(var i = (left + options.offsetX); i <= (left + width - options.offsetX); i += gridX)
    draw(i, top + options.offsetY, 0, height - 2*options.offsetY, "border-right")

})(10, 18, "#content", {offsetX: 15, offsetY: 0})