GridControl: A Grid Overlay System for Design Development.

Avatar of Chris Coyier
Chris Coyier on

gridcontrol.png

Designing by grid is as old as design itself.

Grids are a fundamental concept to design that transcend trends. Long after the shiny, sans-serify, reflective shadows of web 2.0 are gone, grids will still be here. When we access digital media through implants in our brain and see the internet through screens that appear right in our vision, grid-based design will be there. When the cavemen of old carved drawings onto cave walls, grids were there. OK, maybe not cave walls.

There is a web design showcase I found when doing the Gallery Roundup that specifically showcases sites with great grid designs called Design By Grid.

In order for grids to be really effective, you really need to honer them. No “this sort of lines up with this, which sort of lines up with that”. It’s gotta be dead-on, or it just feels amateurish and cheap. Attention to detail is what makes great designers great.

A Ruler: A Grid Designer’s Best Friend

ruler.jpg
Seems pretty obvious. The best way to see if something lines up is to put a ruler up to it and check. None of this eyeballing stuff. Do you think Norm Abram goes around eyeballing measurements when he is rocking out some amazing kitchen counter installation. No. But you also wouldn’t catch ol’ Norm using a metal ruler up on his shiny new monitor either. Nope, we’re going to need a digital ruler of sorts.

Overlaying a Digital Grid

Much of this alignment business is already taken care of for you. Text is by default left aligned, it’s not like you are going to need a ruler for that. If you float a bunch of objects to the left and they line up vertically, you can trust that they are going to be even, that’s just the nature of the technology. But there are things that don’t just line up automatically. Many of your objects will have custom paddings and margins, your images will have graphic elements to them that need to be accounted for. Text can grow and shrink and your grid needs to hold up during that process.

So let’s get to it. What would be ideal is some transparent grid paper we could lay right over the screen. We can do that. The tools are easy: repeating transparent PNG with lines, page element the size of the entire screen, some magic to turn it on and off at will. Let’s give ourselves some options and provide the user with the option of vertical lines, horizontal lines, or both. We’ll need separate markup for all:

<div id="vertical-grid-overlay"></div>
<div id="horizontal-grid-overlay"></div>
<div id="both-grid-overlay"></div>

The CSS is pretty straightforward:

#vertical-grid-overlay {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background: url(images/grid-vert.png) repeat;
	display: none;
	padding: 10px;
}

The other two have identical CSS with the exception of the background image.

Here is how I made the PNG file. 100 x 100px canvas, and some light lines all 10px apart with the one in the middle being just slightly darker than the others. For the horizontal version, I just rotated the canvas and for the “both” I just put both of them on top of each other.

gridphotoshop.png

Notice the display: none; in the CSS. By default, the grid is off. We’ll need a way to turn the grid on. A little Javascript will do:

<p><a href="#" onclick="javascript:document.getElementById('vertical-grid-overlay').style.display='block';">Turn on Vertical Grid</a></p>
<p><a href="#" onclick="javascript:document.getElementById('horizontal-grid-overlay').style.display='block';">Turn on Horizontal Grid</a></p>
<p><a href="#" onclick="javascript:document.getElementById('both-grid-overlay').style.display='block';">Turn on Both Grids</a></p>

Now that we have a way to turn them on, a way to turn them off would be nice. One interesting thing about this cover-the-whole-screen lightbox-ish effect is that it completely deactivates anything below it. In other words, we won’t be able to just put a “turn off grids” link on the page because once the grid is over it, you won’t be able to click on it. For reasons just beyond my grasp, even if you set both the grid and the link as absolutely positioned and set the z-index of the link above the grid, it will still get covered.

To get around this, let’s just put the “turn off” link inside the grid element itself (that’s why I had that padding in there, if you’ve been following along).

<div id="vertical-grid-overlay">
	<p class="alert">
		<a href="#" onclick="javascript:document.getElementById('vertical-grid-overlay').style.display='none';">TURN OFF GRID</a>
	</p>
</div>

<div id="horizontal-grid-overlay">
	<p class="alert">
		<a href="#" onclick="javascript:document.getElementById('horizontal-grid-overlay').style.display='none';">TURN OFF GRID</a>
	</p>
</div>

<div id="both-grid-overlay">
	<p class="alert">
		<a href="#" onclick="javascript:document.getElementById('both-grid-overlay').style.display='none';">TURN OFF GRID</a>
	</p>
</div>

I styled up the link just a bit:

p.alert {
	background: red;
	color: white;
	padding: 5px;
	width: 120px;
}

The Result

Check out the example page.
example.png
[DOWNLOAD EXAMPLE]

Other Options

Of course, after I wrote this article and code the example I find some other ways of doing this that are pretty nice. One of them is a Javascript bookmarklet called Grid that allows you do put a grid over any site with the click of a button. It’s pretty nice but ultimately it’s probably more intense than it needs to be, lots and lots of features. Gridmark is another one of these with some different features, including some customization ability.