CSSで方眼紙のような線を引く 📄

linear-gradientとbackground-sizeをうまく使うと、背景に繰り返しで線を引くことができます。

DEMO

CSS

div {
  position: absolute;
  top: 0; bottom: 0;
  left: 0; right: 0;
  background: linear-gradient(0deg, red 1px, transparent 1px);
  background-size: 100% 10px;
}

線の色

linear-gradient(0deg, red 1px, transparent 1px)のredの部分が線の色になります。

線の太さ

linear-gradient(0deg, red 1px, transparent 1px)の red 1px が線の太さです。

線の間隔

background-size: 100% 10px の 10pxが線の間隔です。
線の太さに依存せずに10px毎に線を引いていきます。
上記例では横線を引いていますが、縦線の場合は、background-size: 10px 100% と逆にしましょう。

これを応用すると、方眼紙のような線を引くことができます。

DEMO

上記の例では10px間隔でグリッドをつくりました。
ウィンドウをリサイズしても余りが出ないようにJavaScriptでサイズを調整していますが、基本的にはCSSのみで線を引いています。