One of the recurring annoyances when designing websites is ensuring alignment of elements on a web page.

Most design applications have the provision of an overlay grid. With very little effort we can add a simple grid to any web page and use it to ensure alignment of elements.

As illustrated in this codepen we can create a grid using a few lines of SVG:

We can use an extension like stylish and save this snippet to apply the above css grid as a background image to html.

So now whenever we activate this style and add grid-backdrop-enabled to html, the grid will show up as a backdrop against the transparent body and we can use it to check for alignment issues.

We can always adjust the SVG to tweak the appearance of the grid. Here is a slightly adapted one which highlights 5px, 10px, 50px and 100px boundaries with different colors: