I’ve been using grids in my CSS designs for quite a while now, inspired by frameworks like Blueprint CSS.  Although I don’t use Blueprint for production work (using a CSS framework starts to get a bit restrictive, and I prefer to build from scratch, rather than trying to override someone else’s default), I do use the methodology in my own CSS to create structured, grid-based layouts, and consistent typography.

One of the clever things that Blueprint introduced was the idea of displaying the grid while you’re working – this proves to be an invaluable aid as you try to refine CSS rules.  But I’ve found that – as good as the theory is – it has a few drawbacks:

1. Because it uses a background-image CSS property, it overrides any beautiful background design you might have implemented.
2. Because it uses images, if you change your grid size, you have to generate a new custom image – a bit of a faff.
3. You have to tweak your CSS every time you want to turn the grid on or off.

Since I work with grids more and more often, I decided to have a stab at coming up with a solution which refines the Blueprint idea, adds a dash of jQuery to produce something which is a little more flexible and user-friendly.

What I’ve come up with is a jQuery plugin called Gridlet.  Instead of using pure CSS, the plugin generates a grid on-the-fly, and it’s an improvement in the following ways:

1. It doesn’t use images – instead it dynamically generates a grid on top of your page, so your design remains intact.
2. Changing your grid size is as simple as changing a setting – no need to generate images.
3. You, er, have to tweak your JS to turn it on or off (this is something I’m going to work on improving – it’s early days).

It’s also worth noting that this first version only produces horizontal grids – that’s all I need at the moment  No doubt I’lla dd vertical grid spacing as and when it’s needed.  Any comments or suggestions are appreciated.

You can download version 0.1 of Gridlet here.  I’ve only tested in Safari 3 and Firefox 3 so far.

Implementing it is really easy – you just do something like this:

$(document).ready(function() {
  $("body").gridlet();
});

If you want to override the default grid height or colour, just pass in the settings like this:

$(document).ready(function() {
  $("body").gridlet({
    height: 18,
    background: "#fcc"
  });
});

And finally, for your curiosity, here’s the source code:

(function($) {
  jQuery.fn.gridlet = function(options) {

    var opts = $.extend({}, $.fn.gridlet.defaults, options);
    var line_position = 0;
    $("<div/>").attr("id", "grid_container").appendTo("body").css({
      position: "absolute",
      top: 0,
      left: 0,
      height: "100px",
      width: "100%",
    })

    while(line_position < $("body").height())
    {
      line_position += opts.height;
      $("<div/>").css({
        position: "absolute",
        top: line_position,
        left: 0,
        height: 1,
        width: "100%",
        background: opts.background
      }).appendTo("div#grid_container")
    }

    return this;

  };

  jQuery.fn.gridlet.defaults = {
    height: 24,
    width: 24,
    background: "#ddf"
  };

})(jQuery);