How to make a grid (like graph paper grid) with just CSS?
HtmlCssHtml Problem Overview
How to make a grid (like graph paper grid) with just CSS? I just want to make a virtual grid paper only using CSS.
Html Solutions
Solution 1 - Html
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 - Html
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;
}
Solution 3 - Html
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/
Solution 4 - Html
What you can do is grab a grid image like this one:
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>
Solution 5 - Html
One conic-gradient() can do the job
html {
background:
conic-gradient(from 90deg at 1px 1px,#0000 90deg,blue 0)
0 0/50px 50px;
}
Solution 6 - Html
Done with png and base64. Scale can be modified with background-size
.square-grid {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoBAMAAAB+0KVeAAAAHlBMVEUAAABkZGRkZGRkZGRkZGRkZGRkZGRkZGRkZGRkZGSH0mEbAAAACnRSTlMAzDPDPPPYnGMw2CgMzQAAAChJREFUKM9jgAPOAgZMwGIwKkhXQSUY0BCCMxkEYUAsEM4cjI4fwYIAf2QMNbUsZjcAAAAASUVORK5CYII=');
background-size: 15px;
}
.full-size {
width: 100vw;
height: 100vh;
}
<div class="square-grid full-size" />
Solution 7 - Html
If you want to get the extra bolder lines of real graph paper and don't mind using ::before and ::after you can do this:
body {
position: relative;
border-radius: 0 !important;
background-color: #ecefff;
background-size: 0.5rem 0.5rem;
background-position:0.25rem 0.25rem;
background-image:
linear-gradient(to right, rgba(50, 100, 150, 0.1) 1px, transparent 1px),
linear-gradient(to bottom, rgba(50, 100, 150, 0.1) 1px, transparent 1px);
margin: 0;
}
body::before, body::after {
content: '';
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-size: 2.5rem 2.5rem;
background-position:0.25rem 0.25rem;
background-image:
linear-gradient(to right, rgba(50, 100, 150, 0.1) 2px, transparent 2px),
linear-gradient(to bottom, rgba(50, 100, 150, 0.1) 2px, transparent 2px);
z-index: -1;
}
body::after {
background-size: 5rem 5rem;
background-image:
linear-gradient(to right, rgba(50, 100, 150, 0.1) 3px, transparent 3px),
linear-gradient(to bottom, rgba(50, 100, 150, 0.1) 3px, transparent 3px);
}