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

What you can do is grab a grid image like this one:

Grid PNG

Then tile it with CSS:

#background {
  background: url('path/to/grid-image.png');
}

So yeah, it's not only CSS – you also need the image, but the solution should be quite clean. Here it is in action:

#background {
    width: 200px;
    height: 160px;
    background: url('http://i.stack.imgur.com/GySvQ.png');
}

<div id="background"></div>

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;
}

Since you mentioned lined paper:

div {
  background-color: #fff;
  background-size: 100% 1.2em;
  background-image: -webkit-linear-gradient(0deg, transparent 79px, #abced4 79px, #abced4 81px, transparent 81px), -webkit-linear-gradient(#eee .05em, transparent .05em);
  background-image: -moz-linear-gradient(0deg, transparent 79px, #abced4 79px, #abced4 81px, transparent 81px), -moz-linear-gradient(#eee .05em, transparent .05em);
  background-image: -ms-linear-gradient(0deg, transparent 79px, #abced4 79px, #abced4 81px, transparent 81px), -ms-linear-gradient(#eee .05em, transparent .05em);
  background-image: -o-linear-gradient(0deg, transparent 79px, #abced4 79px, #abced4 81px, transparent 81px), -o-linear-gradient(#eee .05em, transparent .05em);
  background-image: linear-gradient(0deg, transparent 79px, #abced4 79px, #abced4 81px, transparent 81px), linear-gradient(#eee .05em, transparent .05em);
  -pie-background: linear-gradient(0deg, transparent 79px, #abced4 79px, #abced4 81px, transparent 81px) 0 0 / 100% 1.2em, linear-gradient(#eee .05em, transparent .05em) 0 0 / 100% 1.2em #fff;
  behavior: url(/PIE.htc);
}

<div style="width: 200px; height: 200px"></div>

The last line: behavior: url(/PIE.htc); is a plugin called css3pie that adds support for ie 6-9 I believe. In fact this example is taken from their website where there are plenty more interesting examples: http://css3pie.com/demos/gradient-patterns/

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);
}

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

Tags:

Html

Css

Related

Recent Posts