How to create a Dotted Grid/Graph Sheet background using css?

Question

How can one go about creating a Dotted Grid Paper Background using CSS just like the one in the figure below?

Answer 1

I think a simple radial-gradient can help you, especially to avoid a ton of repetitions in the code

body {
   /* diameter of the circle */
   --d: 4px; 
   
   background : radial-gradient(
     circle at 
        var(--d) 
        var(--d), 
        
     #000 calc(var(--d) - 1px), 
     #0000 var(--d)
   ) 
   0 0 / 50px 50px;
}

You can adjust the distance between the dots by changing the background-size (defined in the shorthand as 50px 50px) and/or the background-position (defined in the shorthand as 0 0)

Answer 2

A simple and easy way will be to use background: repeating-linear-gradient(); which is supported by most browsers. You can check browser support on caniuse.com

Here is a code snippet that works:

.gridBackground {
  background: repeating-linear-gradient(transparent, transparent 2px, royalblue 2px, royalblue 22px, transparent 22px, transparent 23px, royalblue 23px, royalblue 43px),
              repeating-linear-gradient(0.25turn, transparent, transparent 2px, royalblue 2px, royalblue 22px, transparent 22px, transparent 23px, royalblue 23px, royalblue 43px);
}

/*  Reset & other Formatting CSS  */
body{
  margin: 0; padding: 0;
  width: 100vw; height: 100vh;
  color: #fff;
  font-family: monospace;
  font-size: 1.5rem;
  text-align: center;
}
.gridBackground{
  display: flex;
  align-items: center; justify-content: center;
  width: 100%; height:100%; 
}

<div class="gridBackground">
  You like Grid Backgrounds,<br/>don't you?
</div>

Hope this helps...

Peace