【CSS】だけで「グリッド」の背景を作る

こんにちは、さち です。

サイトの背景に「グリッド（方眼・格子）」を配置したいことがあったんですが、「画像」や「SVG」を使う方法は素材の準備が面倒……。

ということで、「CSS」だけで「グリッド」を実装してみます。

実装方法

完成図

HTML

<div class="grid"></div>

CSS

.grid {
  height: 300px;

  /* グリッドの色・太さ */
  background-image: linear-gradient(to bottom, orange 5px, transparent 0%), linear-gradient(to right, limegreen 5px, transparent 0%);
  /* グリッドの間隔 */
  background-size: 70px 70px;
}

background-image に、2つの linear-gradient を設定することで「縦」「横」それぞれの方向のグリッドを作っています。

グリッドの「色」「太さ」は、linear-gradient の orange 5px limegreen 5px の部分で指定して、transparent 0% でグリッド線の間を透明にしています。

また、グリッドの「間隔」は background-size: 70px 70px; で指定しています。今回は「縦方向」「横方向」どちらも同じ間隔にしていますが、別々の間隔にすることも可能です。