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

Question

How to make a grid (like graph paper grid) with just CSS? I just want to make a virtual grid paper only using CSS.

Evolutionary

Please look at this version: jsfiddle.net/4e5mcmk4 it has fix size for squares. – Intellectual

Answer 1

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/

Zigzagger

Answer 2

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

Tewfik

Clear and smart, nice! – Japanese

Thank you! Any idea to make a dashed/dotted grid? – Roundel

Easy Peasy. Good to have easier version. – Moneybags

This is great for local development, I'm just using it to make sure my CSS implementation is sticking to the design grid, so I'm not concerned about cross-browser support. I made a slight modification for my use case, by using percentages instead of px I get a grid of 16 columns regardless of the viewport width: background-size: 6.25% 16pt; – Chuu

If somebody's code still not working, then try to add: background-repeat: repeat; – Accede

If you want to get rid of the top and left border (so that the borders are only between the cells), then add background-position: -1px -1px; – Imelda

Answer 3

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

Retraction

Hi and welcome to SO ! Please try to add a few lines to explain why you think your answer responds best to the original question, thanks. – Ecg

The other answers are good, but this is the kind of grid many people will have in mind when searching for "graph paper", thanks. – Meerkat

I like this idea, but can you post a simple version that shows just the basic graph? – Souther

This should be the accepted answer. – Ward

this is awesome – Polynesian

Answer 4

One conic-gradient() can do the job (https://css-shape.com/grid-lines/)

html {
  background:
    conic-gradient(from 90deg at 1px 1px,#0000 90deg,blue 0) 
    0 0/50px 50px;
}

Another concept:

html {
  --s: 100px; /* control the size */
  
  --_g: #0000 90deg,#366 0;
  background: 
    conic-gradient(from 90deg at 2px 2px,var(--_g))
     0 0/var(--s) var(--s),
    conic-gradient(from 90deg at 1px 1px,var(--_g))
     0 0/calc(var(--s)/5) calc(var(--s)/5);
}

Misuse

Answer 5

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('https://i.stack.imgur.com/GySvQ.png');
}

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

Metcalf

More than acceptable method - I still use this as it's simple. Just make sure the PNG is as compressed as can be and all is good. For example, the above answer uses a PNG file which is 1kb. If you run the file through tinypng.com, it reduces it nicely to 109b - an 89% saving. – Douse

Technically you could make this css only using: background: url('data:image/png;base64,[yourBase64StringHere]'); Replacing [yourBase64StringHere] with a base64 encoded string of that cross image. – Thyratron

If you really want to use an image, please use SVG. – Teflon

Answer 6

Done with svg and base64. Scale and colors can be modified by changing width, height and color parameters in the svg. Here are two examples with a blue and white square grid of different sizes.

.blue-square-grid-20px {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Crect width='100%' height='100%' fill='%230000ff' /%3E%3Crect x='50%' width='2' height='100%' fill='%231ff' /%3E%3Crect y='50%' width='100%' height='2' fill='%231ff' /%3E%3C/svg%3E%0A");
}

.white-square-grid-40px {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Crect width='40' height='40' fill='%23fff' /%3E%3Crect x='50%' width='1' height='100%' fill='%23ddd' /%3E%3Crect y='50%' width='100%' height='1' fill='%23ddd' /%3E%3C/svg%3E%0A");
}

.example-box {
  width: 100vw;
  height: 100px;
}

<p>blue grid, 20px grid size and 2px line width</p>
<div class="blue-square-grid-20px example-box"></div>
<p>white grid, 40px grid size and 1px line width</p>
<div class="white-square-grid-40px example-box"></div>

Vocoid

This isn't scalable, gradients or SVG is preferred – Teflon

But it's a PNG, and a PNG is a bitmap image. – Teflon

@Gugalcrom123 Good point. It's now changed to svg with 2 examples of different color and sizing. – Vocoid

Answer 7

Since we already have solutions for dotted grids and full line grids, for the sake of completeness, here's a dashed grid solution (dotted or single is also possible). Just adjust the CSS variables for your needs.

Here's a fiddle: https://jsfiddle.net/0nt7v9bj/

.dashed-grid-paper {

    --grid-size: 30px;
    --grid-strength: 1px;
    --grid-dash: 10px;
    --grid-gap: 5px;
    --grid-color: #ddd;
    --paper-color: #fff;

  background-color: var(--paper-color);
  background-size: var(--grid-dash) var(--grid-dash), var(--grid-size) var(--grid-size);
  background-image:
    linear-gradient(to bottom, transparent var(--grid-gap), var(--paper-color) var(--grid-gap)), 
    linear-gradient(to right, var(--grid-color) var(--grid-strength), transparent var(--grid-strength)),
    linear-gradient(to right, transparent var(--grid-gap), var(--paper-color) var(--grid-gap)),
    linear-gradient(to bottom, var(--grid-color) var(--grid-strength), transparent var(--grid-strength));
}

<body class="dashed-grid-paper">
<p style="margin: 40px">How to make a dashed line grid paper<br>like background using CSS only.</p>
</body>

To get a dotted version change the CSS variables like so:

--grid-dash: 1px;
--grid-gap: 5px;

To get a single line version change the CSS variables like so:

--grid-dash: 1px;
--grid-gap: 1px;

Almuce

Answer 8

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

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

Example in Chrome in fancybox

Pelasgian