両子持ち格子
【css】
body{/*両子持ち格子の背景*/
background-size:30px 30px;
background-image:
linear-gradient(90deg,#6be 1px,transparent 1px,transparent 17px,#6be 17px,#6be 18px,transparent 18px),
linear-gradient(180deg,#6be 1px,transparent 1px,transparent 4px,rgba(50,150,255,.4) 4px,rgba(50,150,255,.4) 14px,transparent 14px,transparent 17px,#6be 17px,#6be 18px,transparent 18px),
linear-gradient(90deg,#fff 4px,rgba(50,150,255,.4) 4px,rgba(50,150,255,.4) 14px,#fff 14px);
background-color:#fff;
}
適宜必要なプロパティを追加してください