Back to Blog

gridOverlay, a JS Plugin for Perfect Alignment


For the impatient, I’ll start off with the link: gridOverlay Javascript Plugin.

Why We Built It

The gridOverlay Plugin was built to solve a couple of problems. First and foremost, this is a tool for helping with the issue of aligning elements to a layout grid. If you’re using Sass to write CSS you’re probably using some sort of grid system already, but if you’re using using vanilla CSS, or just want a sanity check, you can add this JavaScript file during development to check on your layout.

The other problem it can help with is creating a baseline grid for your page. By default it shows a 24px baseline grid, but that can be easily modified in the options at the beginning of the JS file. Once you have your grid set up it’s simple to tweak values in the web inspector in your browser and then copy those back to your CSS.


The available options are: maximum page width, the number of columns, column width, column color, gutter width, baseline height, baseline color and whether or not the grid is visible on page load or has to be toggled on.

The Future

Plans for the future include breakpoints for responsive grids, a control panel rendered in the DOM for altering options on the fly and a bookmarklet for quick checks without downloading/installation.

Author Steve Hickey

More posts from this author

Sign up to receive updates from our blog

What we do Expertise

From concept to design, we'll partner with your team to deliver amazing product and website experiences.

Recent Projects Work

See the results of our most recent digital product and website engagements.