Grid Overlay: The Lasy Way

::before擬似要素を使ってCSSグラデーションで作成したグリッド画像をviewport全体に敷き詰める方法。

単純にbody要素やhtml要素の背景にしてしまうとbody要素の背景画像等とバッティングする(複数の背景画像を指定するのは後処理が面倒)ので、最前面にグリッド画像を表示してやる。すると今度は文章が選択できなくなったり、リンクがクリックできなくなったりする。最前面に画像が敷き詰められているので当然そうなる。これではダメ…と思いきや、pointer-eventsプロパティをnoneにすることによって通常通りに選択したりクリックできたりするようになる。

/* This CSS code released into the public domain. */
body::before {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  content: "";
  background-image: linear-gradient(
    left,
    rgb(255, 0, 255) 0,
    rgb(255, 0, 255) 37.5%,
    transparent 37.5%,
    transparent 62.5%,
    rgb(255, 0, 255) 62.5%,
    rgb(255, 0, 255) 100%
  );
  background-position: 50% 0;
  background-size: 64px 1px;
  opacity: 0.2;
  pointer-events: none;
}

このグリッドは16pxベースのグリッドで、溝が16pxでカラムがその3倍の48pxになっている。グリッド画像の作成にはCSSグラデーションを使用し、background-sizeの変更でグリッドサイズを変更できる(溝とカラムの比率は変更できないが)。例えば960.gsのデフォルトである20pxベースにしたいなら

background-size: 80px 1px;

に変更すれば良い。

このグリッドオーバーレイのCSSコードはパブリックドメインとする。