.grid {/ 网格单个格子大小 /background-size: 35px 35px;background-image:/ 横线 /linear-gradient(0, #e6e6e6 1px, transparent 1px),/ 竖线 /linear-gradient(90deg, #e6e6e6 1px, transparent 1px);}

效果如下:

也可以变革一下，将竖线的颜色改为背景同色，制作条记本横线

html图片上绘制网格线纯Css绘制网格线笔记本横线 RESTful API

.grid {/ 网格单个格子大小 /background-size: 35px 35px;background-image:/ 横线 /linear-gradient(0, #e6e6e6 1px, transparent 1px),/ 竖线 /linear-gradient(90deg, #fff 1px, transparent 1px);}