How to make a grid (like graph paper grid) with just CSS?
Solution 1:
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);
}Solution 2:
body {
background:
linear-gradient(-90deg, rgba(0,0,0,.05) 1px, transparent 1px),
linear-gradient(rgba(0,0,0,.05) 1px, transparent 1px),
linear-gradient(-90deg, rgba(0, 0, 0, .04) 1px, transparent 1px),
linear-gradient(rgba(0,0,0,.04) 1px, transparent 1px),
linear-gradient(transparent 3px, #f2f2f2 3px, #f2f2f2 78px, transparent 78px),
linear-gradient(-90deg, #aaa 1px, transparent 1px),
linear-gradient(-90deg, transparent 3px, #f2f2f2 3px, #f2f2f2 78px, transparent 78px),
linear-gradient(#aaa 1px, transparent 1px),
#f2f2f2;
background-size:
4px 4px,
4px 4px,
80px 80px,
80px 80px,
80px 80px,
80px 80px,
80px 80px,
80px 80px;
}