Grid with dashed lines
Create a grid of dashed lines using a few lines of code
- Two properties
- Two gradients
- Easy to adjust using CSS variables
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.