Grid lines background

Written byPhuoc Nguyen

Created

30 Aug, 2023

Last updated

22 Nov, 2023

#Using background image

To create a grid pattern using CSS, you can use the `background-image` property. Start by creating a square image with two lines – one horizontal and one vertical – that intersect at the center of the square.

The image can be in either SVG or PNG format. Here's an example of a square image in SVG format:

The SVG consists of three rectangles. The first rectangle forms a white square with a size of 40 pixels. The second rectangle is 1 pixel wide and spans the full height to create a vertical line. The `x='50%'` attribute centers the line vertically.

Likewise, the last rectangle is 1 pixel high and spans the full width to create a horizontal line. It's worth noting that the last two rectangles are filled with identical colors.

Next, let's specify the `background-image` property for the element where you want the grid to show up. Simply use the `url()` function to link to your grid image file.

css

.grid {
    background-image: url('/path/to/grid.svg');
}

If you want the browser to avoid sending additional request to load the background image, then you can embed it like this:

css

.grid {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Crect width='40' height='40' fill='%23fff' /%3E%3Crect x='50%' width='1' height='100%' fill='rgb(203 213 225)' /%3E%3Crect y='50%' width='100%' height='1' fill='rgb(203 213 225)' /%3E%3C/svg%3E%0A");
}

Voila! You now have a grid made up of horizontal and vertical lines that repeat seamlessly.

By default, an image will repeat both vertically and horizontally, with each repetition being the same size as the background, which is 40 pixels in this case.

But what if you want to change the size of the repeated image? No problem! You can use the `background-size` property to customize the dimensions. For example, if you set it to 20 pixels, you'll create smaller squares instead. Here's the code you need to make it happen.

css

.grid {
    background-size: 20px;
}

#Using linear gradients

Another way to create grid lines in CSS is with the `linear-gradient()` function.

To make a grid, first, select the element(s) you want to add a grid background to and set the `background-image` property. Then, use the `linear-gradient()` function to specify two colors that are similar or identical, separated by a transparent section of the same width as your desired line thickness.

css

.grid {
    background-image: linear-gradient(to right, gray 1px, transparent 1px);
}

The code above creates gray vertical lines that are one pixel thick. You can adjust the line thickness by changing the value of `1px` in both parts of the gradient (i.e., `gray 2px`, `transparent 2px`, for two-pixel-thick lines).

To make horizontal lines, change `to right` to `to bottom`. If you want both horizontal and vertical lines, simply combine both gradients.

css

.grid {
    background-image:
        linear-gradient(to right, gray 1px, transparent 1px),
        linear-gradient(to bottom, gray 1px, transparent 1px);
}

Finally, don't forget to set the size of the squares using the `background-size` property.

To adjust the color and spacing of lines, simply change the value of `gray` to any other valid CSS color value, as shown in the example below.

#Grid dot background

We can use a similar approach to create a grid with a dot background, but this time we'll use the `radial-gradient` function to make circles with a radius of 2 pixels. Don't hesitate to adjust the background color and radius to suit your needs.

#See also

Snap a draggable element to a grid

If you found this post helpful, please consider giving the repository a star on GitHub or sharing the post on your favorite social networks 😍. Your support would mean a lot to me!

Questions? 🙋

Do you have any questions about front-end development? If so, feel free to create a new issue on GitHub using the button below. I'm happy to help with any topic you'd like to learn more about, even beyond what's covered in this post.

While I have a long list of upcoming topics, I'm always eager to prioritize your questions and ideas for future content. Let's learn and grow together! Sharing knowledge is the best way to elevate ourselves 🥷.

Ask me questions

Newsletter 🔔

If you're into front-end technologies and you want to see more of the content I'm creating, then you might want to consider subscribing to my newsletter.

By subscribing, you'll be the first to know about new articles, products, and exclusive promotions.

Don't worry, I won't spam you. And if you ever change your mind, you can unsubscribe at any time.

Phước Nguyễn