How to make a grid (like graph paper grid) with just css?

How to make a grid (like graph paper grid) with just css?

To make grids you can use CSS gradients, which work on all modern browsers (see Caniuse).

Use linear gradients to draw a lined grid:

body {
  background-size: 40px 40px;
  background-image:
    linear-gradient(to right, grey 1px, transparent 1px),
    linear-gradient(to bottom, grey 1px, transparent 1px);
}

 

 

 

 

 

 

Use a radial gradient to draw a grid with dotted corners:

body {
  background-size: 40px 40px;
  background-image: radial-gradient(circle, #000000 1px, rgba(0, 0, 0, 0) 1px);
}

 

作者:Chuck Lu    GitHub