Need to create a grid-like background? I recently needed one for an image drop-zone. It’s pretty simple to generate a grid background using the
linear-gradient feature of CSS.
The CSS lines to notice here is this:
background-image: linear-gradient($white .4rem, transparent .4rem), linear-gradient(90deg, $white .4rem, transparent .4rem); background-size: 10rem 10rem;
Here we’ve added two gradient backgrounds. Each
linea-gradient creates a
.4rem white line. And when we set the
10rem, those lines start repeating. We used two
linear-gradient to create one in the horizontal orientation and one in the vertical orientation.