使用纯css制作网格线

效果图

<div id="grid"></div>

html,body{
  margin: 0;padding: 0;width: 100%;height: 100%;background:#029270;
}
#grid{
  width: 100%;height: 100%;background-size: 30px 30px, 30px 30px;
  background-image: linear-gradient(hsla(0, 0%, 100%, 0.1) 1px, transparent 0), linear-gradient(90deg, hsla(0, 0%, 100%, 0.1) 1px, transparent 0);
}