When I was sketching online yesterday, I wanted to add some grids to the canvas, just like the ones in PHOTOSHOP. But it doesn’t work with canvas. , the picture makes me despise again, let it go.

Today, I was thinking about trying to draw a grid with CSS3. I found some information and looked at all the properties of CSS3. I found a way to draw a grid

These attributes are Linear-gradient and background-size. Welcome them

So how do you do that? Let’s forget about the grid for a moment, but let’s think about, how do I draw a line?

… (10 minutes past bird)

Well, look at the following code (only paste webKit implementation, too many other, do not want to write, same as ~ <_<) :

.grid{
    background:
        -webkit-linear-gradient(top, transparent 39px, blue 40px);
}Copy the code

It works like this:

Everything in front of 39px is transparent, so if you make everything after 40px transparent or invisible, it will be a line. This is where background-size comes in. What is the background – the size? According to W3CSchool:

The background-size property specifies the size of the background images.

Specify the size of the background image (the gradient is also an image). For example, if you have a 100 x 100 image, you can use this property to specify that only 30 x 20 of it will be displayed (purely for example). Set the horizontal limit to 100% (i.e., no limit) and the vertical limit to only show 40px. This will leave out 1 pixel of blue and make it look like a line.

.grid{
    background:
        -webkit-linear-gradient(top, transparent 39px, blue 40px);
        background-size: 100% 40px;
}Copy the code

As you can see, when the background tile is not set, the horizontal line comes out. “Hoho” is the same as “hoho”

Well, the next thing to do is shave your head! Use CSS3’s multiple backgrounds, draw a gourd gourd and add a vertical line, and you’re done. The complete code is as follows:

.grid{
    background:
        -webkit-linear-gradient(top, transparent 39px, blue 40px),
        -webkit-linear-gradient(left, transparent 39px, blue 40px)
        ;
    background-size: 40px 40px;
}Copy the code

Hoo ~ done! If your browser supports CSS3, check out the Live demo here. But isn’t the grid a little monotonous? If you’re getting creative, you can create something even more dramatic, such as a 2px wide, alternating color grid

Well, the rest is up to you, Hoho