Aligning a CSS background grid with the page's typographic grid.

Baseline-Grid-+-CSS-Background.markdown

A Pen by Anand Thakker on CodePen.

License.

index.html

<div id="content">
  Hello<br/>
  there.<br/>
  Notice that the background grid is aligned with the
  baseline of the text.<br/>
  (Of course, it's easy in this demo--the hard part is systematically styling the type in a site so that it maintains baseline.)
  Try this out: <a href="http://www.gridlover.net/" title="Gridlover">Gridlover</a>
</div>

style.scss

@import "compass";
$line-height: 1.5;

body {
  margin: 0;
  padding: 0;
  background-color: #434343;
  line-height: $line-height;
}

@mixin bg-grid($color, $bg-color: transparent, $lh: $line-height) {
  background-color: $bg-color;
  background-image: linear-gradient(0deg, 
      transparent 49%, 
      $color 50%, 
      $color 51%, 
      transparent 52%, 
      transparent), 
    linear-gradient(90deg, 
      transparent 49%, 
      $color 50%, 
      $color 51%, 
      transparent 52%, 
      transparent);
    background-position: .5em .5em;
    background-size: ($lh * 1em) ($lh * 1em);
}

#content{
    color: gray;
    @include bg-grid(rgba(255,255,255,.2), black);
}