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

One conic-gradient() can do the job

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

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" />

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

Example in Chrome in fancybox