CSS: draw parallel lines, grid, diamond grid

By Xah Lee. Date: . Last updated: .

parallel lines

.xparall {
 background-image: repeating-linear-gradient(
  red 0,
  red 2px,
  white 2px,
  white 20px
 );
 width: 200px;
 height: 200px;
}

vertical parallel lines

.xvparall {
 background-image: repeating-linear-gradient(90deg,
  red 0,
  red 2px,
  white 2px,
  white 20px
 );
 width: 200px;
 height: 200px;
}

rectangular grid

.xrecgrid {
 background-image:
  repeating-linear-gradient(
   red 0,
   red 2px,
   transparent 2px,
   transparent 20px
  ),
  repeating-linear-gradient(
  90deg,
  red 0,
  red 2px,
  transparent 2px,
  transparent 20px
 );
 width: 202px;
 height: 202px;
}

diamond grid

Alice was beginning to get very tired of sitting by her sister on the bank, and of having nothing to do: once or twice she had peeped into the book her sister was reading, but it had no pictures or conversations in it, “and what is the use of a book,” thought Alice “without pictures or conversation?”. 
{
 --xc: hsl(0 0 90 / 50);
 background-image:
  repeating-linear-gradient(45deg, var(--xc) 0, var(--xc) 1px, transparent 1px, transparent 30px),
  repeating-linear-gradient(-45deg, var(--xc) 0, var(--xc) 1px, transparent 1px, transparent 30px);
 height: 9rem;
 margin: 1rem;
 padding: 0.5rem;
}

CSS gradients