CSS Tip

Grid with dashed lines

Create a grid of dashed lines using a few lines of code

A grid of dashed lines

html {
  --c1: black;  
  --c2: pink;  
  --s: 100px;  /* control the size of the grid */
  --n: 4;      /* control the number of dashes*/
  --t: 3px;    /* the thickness of dashes */
  --g: 10px;   /* the gap between dashes */
  
  --_d:calc(var(--s)/var(--n));
  background: 
    conic-gradient(from 90deg at var(--t) var(--t),var(--c2) 90deg,#0000 0) 
     calc(-1*var(--t)) calc(-1*var(--t)) / var(--s) var(--s),
    conic-gradient(from 90deg at var(--g) var(--g),var(--c1) 90deg,var(--c2) 0) 
     calc((var(--_d) + var(--g) + var(--t))/-2) 
     calc((var(--_d) + var(--g) + var(--t))/-2) 
    / var(--_d) var(--_d);
}

See the Pen CSS-only Grid of dashed lines by Temani Afif (@t_afif) on CodePen.