Question 253883 in CSS Question posted in
Some basic documentation can be found here.

How to make a dotted grid using css?

I need to make dotted background like on the example
enter image description here

i’ve tried to use background-image and it works but i don’t know how to make gaps between dots only for even or odd columns

 background-image: radial-gradient(circle at 1px 1px, black 1px, transparent 0);
 background-size: 40px 40px;
Tags:

2

Answers


  1. 0

    Increase the background size to 2x the spacing between your dots.

    Have 3 dots for every repetition of the background:

    • top-left, like you already have
    • top-center
    • center-left

    The result should look something like this:

    #testcase {
  width: 370px;
  height: 360px;
}

.background {
  background-image: radial-gradient(circle at  2px  2px, black 2px, transparent 0),
                    radial-gradient(circle at 42px  2px, black 2px, transparent 0),
                    radial-gradient(circle at  2px 42px, black 2px, transparent 0);
  background-size: 80px 80px;
}
    <div id="testcase" class="background">
</div>

    Note: made the dots a bit bigger to better show the result

    Login or Signup to reply.
  2. 0

    Add another gradient to hide some dots:

    html {
 background-image: 
  conic-gradient(#0000 75%,#fff 0),
  radial-gradient(black 2px, transparent 0);
 background-size: 
  80px 80px,
  40px 40px;
}

    Using CSS variables for better control:

    html {
 --s: 40px; /* control the overal size */
 --r: 6px;  /* control the radius of the circles */
 --b: #f2f2f2; /* the background color */

 background: 
  conic-gradient(#0000 75%,var(--b) 0)
   0 0/calc(2*var(--s)) calc(2*var(--s)),
  radial-gradient(black var(--r),var(--b) calc(var(--r) + 1px))
   0 0/var(--s) var(--s);
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search