My Grid overlay. Includes baseline grid. Just change the vars at the top to match your chosen framework. Current values are mostly from Bootstrap 2.3

dev-grid.scss

$sg-base-font-size: $baseFontSize;
$sg-base-line-height: $baselineHeight;
$sg-column-width: $gridColumnWidth;
$sg-gutter-width: $gridGutterWidth;
$sg-grid-columns: $gridColumns;
$sg-grid-width: $gridRowWidth;
$sg-major-stripe: blue;
$sg-minor-stripe: green;
$sg-overlay-opacity: 0.1;
$sg-subdivs: 4;

@mixin show-grid($color: #ccc, $show-grid: true, $show-baseline: true, $show-margins: true) {
  // Configurable options
  $sg-base-font-size:     14px !default;
  $sg-base-line-height:   $sg-base-font-size * 1.333 !default;
  $sg-overlay-opacity:    0.15 !default;
  $sg-gutter-width:       20px !default;
  $sg-grid-columns:       12 !default;
  $sg-column-width:       60px !default;
  $sg-grid-width:         ($sg-column-width + $sg-gutter-width) * $sg-grid-columns !default;
  $sg-major-stripe:       invert($color) !default;
  $sg-minor-stripe:       rgba($sg-major-stripe, $sg-overlay-opacity) !default;
  $sg-overlay-opacity:    0.1 !default;
  $sg-subdivs:            4 !default;
  $sg-margins:            $sg-gutter-width/2 !default;
  // End configurable options

  // The setup
  $sg-delimiter: unquote("");
  $sg-baseline: unquote("");
  $sg-baseline-size: $sg-baseline;
  $sg-grid: unquote("");
  $sg-grid-size: $sg-grid;
  @if $show-grid {
    @if $show-baseline {
      $sg-delimiter: unquote(", ");
    }
  }
  @if $show-baseline {
    $sg-baseline: linear-gradient(
      top,
      transparent 0, 
      transparent $sg-base-line-height - 1,
      rgba($sg-major-stripe,$sg-overlay-opacity) $sg-base-line-height - 1),
      linear-gradient(top, transparent 0, transparent $sg-base-line-height / $sg-subdivs - 1,
      rgba($sg-minor-stripe, $sg-overlay-opacity * 2) $sg-base-line-height / $sg-subdivs
    );
    $sg-baseline-size: 100% $sg-base-line-height, 100% $sg-base-line-height/$sg-subdivs;
  }
  @if $show-grid {
    $column-percent: percentage( $sg-column-width / ($sg-column-width + $sg-gutter-width) );
    $gutter-percent: 100% - $column-percent;
    $sg-grid: linear-gradient(
      left,
      transparent 0%,
      transparent $gutter-percent,
      rgba($sg-major-stripe, $sg-overlay-opacity) $gutter-percent,
      rgba($sg-major-stripe, $sg-overlay-opacity) $column-percent
    );
    $sg-grid-size: ($sg-gutter-width + $sg-column-width) 100%;
  }
  $background-image: $sg-baseline+$sg-delimiter+$sg-grid;
  $background-size: $sg-baseline-size+$sg-delimiter+$sg-grid-size;

  // The output
  @include background-image( $background-image );
  background-color: $color;
  background-size: $background-size;
  background-position: #{if($show-margins, -$sg-gutter-width*0.4, -$sg-gutter-width)} 0;
}