SOURCE

<p>css网格绘制</p>
<div class="grid">
</div>
<div class="grid2">
</div>

div {
  width: 400px;
  height: 280px;
  margin: 40px;
  border: 1px solid;
}

.grid {
  background: -webkit-linear-gradient(top, transparent 39px, blue 40px), -webkit-linear-gradient(left, transparent 39px, blue 40px);
  background: -moz-linear-gradient(top, transparent 39px, blue 40px), -moz-linear-gradient(left, transparent 39px, blue 40px);
  background: -o-linear-gradient(top, transparent 39px, blue 40px), -o-linear-gradient(left, transparent 39px, blue 40px);
  background: -ms-linear-gradient(top, transparent 39px, blue 40px), -ms-linear-gradient(left, transparent 39px, blue 40px);
  background: linear-gradient(top, transparent 39px, blue 40px), linear-gradient(left, transparent 39px, blue 40px);
  -webkit-background-size: 40px 40px;
  -moz-background-size: 40px 40px;
  background-size: 40px 40px;
}

.grid2 {
  background: -webkit-linear-gradient(top, transparent 39px, blue 39px, blue 41px, transparent 41px, transparent 79px, red 80px), -webkit-linear-gradient(left, transparent 39px, orange 39px, orange 41px, transparent 41px, transparent 79px, green 80px);
  background: -moz-linear-gradient(top, transparent 39px, blue 39px, blue 41px, transparent 41px, transparent 79px, red 80px), -moz-linear-gradient(left, transparent 39px, orange 39px, orange 41px, transparent 41px, transparent 79px, green 80px);
  background: -o-linear-gradient(top, transparent 39px, blue 39px, blue 41px, transparent 41px, transparent 79px, red 80px), -o-linear-gradient(left, transparent 39px, orange 39px, orange 41px, transparent 41px, transparent 79px, green 80px);
  background: -ms-linear-gradient(top, transparent 39px, blue 39px, blue 41px, transparent 41px, transparent 79px, red 80px), -ms-linear-gradient(left, transparent 39px, orange 39px, orange 41px, transparent 41px, transparent 79px, green 80px);
  background: linear-gradient(top, transparent 39px, blue 39px, blue 41px, transparent 41px, transparent 79px, red 80px), linear-gradient(left, transparent 39px, orange 39px, orange 41px, transparent 41px, transparent 79px, green 80px);
  -webkit-background-size: 81px 81px;
  -moz-background-size: 81px 81px;
  background-size: 81px 81px;
}