CSS Grid Pattern

Week 309 was posted by Charanjit Chana on 2023-09-25.

While playing with some CSS, I wondered if it would be possible to build a simple grid pattern to apply to the page, which of course it was trivial to do with the linear-gradient function.

:root {
    --grid-size: 10px;
}

body {
    background-image:
        linear-gradient(to left, transparent calc(var(--grid-size) - 1px), #45A7D255 var(--grid-size)),
        linear-gradient(to bottom, transparent calc(var(--grid-size) - 1px), #45A7D255 var(--grid-size));
    background-size: var(--grid-size) var(--grid-size);
}

What does the above do? It's two linear gradients, one that goes from left to right creating a 10x10 pixel box. The first 9 pixels are transparent with the last pixel blue. This is repeated, but with the second gradient going from top to bottom creating the grid effect.

But what about taking it a bit further to create a grid paper type effect? Where every 10x10 box has its own boundary? Well we can introduce the same gradients, just bigger. I also removed any opacity so that the larger grid lines appear bolder.

:root {
    --grid-size: 10px;
}

body {
    background-image:
        linear-gradient(to left, transparent calc(var(--grid-size) - 1px), #45A7D255 var(--grid-size)),
        linear-gradient(to bottom, transparent calc(var(--grid-size) - 1px), #45A7D255 var(--grid-size)),
        linear-gradient(to left, transparent calc(var(--grid-size)*10 - 1px), #45A7D2 calc(var(--grid-size)*10)),
        linear-gradient(to bottom, transparent calc(var(--grid-size)*10 - 1px), #45A7D2 calc(var(--grid-size)*10));
    background-size:
        var(--grid-size) var(--grid-size),
        var(--grid-size) var(--grid-size),
        calc(var(--grid-size) * 10) calc(var(--grid-size) * 10),
        calc(var(--grid-size) * 10) calc(var(--grid-size) * 10);
}

As ever, its becoming more and more impressive all that we can achieve with just CSS!

Tags: css