Drawing a grid using CSS

by

Here is a simple CSS-only solution, using linear gradients:

html, 
body,
.grid {
    height: 100%;
    width: 100%;
    margin: 0;
}
.grid {
    background-image:
      repeating-linear-gradient(#ccc 0 1px, transparent 1px 100%),
      repeating-linear-gradient(90deg, #ccc 0 1px, transparent 1px 100%);
    background-size: 71px 71px;
}
<div class="grid"></div>

Leave a Comment