Baseline and multi-column grids with CSS3 gradients (in SCSS)

1-multi-column-grid.scss

// Multi-column grid

/* define grid (http://thoughtbot.com/bourbon/#grid-width) */
$gw-column: 60px;
$gw-gutter: 20px;
$outer-margin: 10px;

/* unless using Bourbon ($n = number of columns):
@function grid-width($n) {
  @return $n * $gw-column + ($n - 1) * $gw-gutter;
}
*/

@function total-width($n, $margin: $outer-margin) {
  @return grid-width($n) + (2 * $margin);
}

$w-320: total-width(4);
$w-480: total-width(6);
$w-640: total-width(8);
$w-800: total-width(10);
$w-960: total-width(12);

.site {
  width: $w-800;
 
  /* draw multi-column grid */
  @include linear-gradient(left, transparent $gw-column, #eee $gw-gutter);
  @include background-size(($gw-column + $gw-gutter) ($gw-column + $gw-gutter));
  background-position: $outer-margin 0;
}

// helpful resource for other options: http://gridinator.com

2-baseline-grid.scss

// Baseline grid

$font-size: 18px;
$line-h: $font-size * 1.5;

@include linear-gradient(lightcoral 1px, transparent 1px);
@include background-size($line-h $line-h);
background-position: -1px -1px;

3-grids.scss

// Baseline & multi-column together

$gw-column: 60px;
$gw-gutter: 20px;
$outer-margin: 10px;

$font-size: 18px;
$line-h: $font-size * 1.5;

.site {
  width: 640px;
  background-color: #fdfdfd;

  /* draw grid: 1. baseline gradient, 2. column gradient; */
  @include background-image(linear-gradient(lightcoral 1px, transparent 1px), linear-gradient(left, transparent $gw-column, #eee $gw-gutter));
  @include background-size($line-h $line-h, ($gw-column + $gw-gutter) ($gw-column + $gw-gutter));
  background-position: -1px -1px, $outer-margin 0;
}