Grow your CSS skills. Land your dream job.

GridControl: A Grid Overlay System for Design Development.

Published by Chris Coyier

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.

Comments

  1. Permalink to comment#

    Nice idea! I never thought of doing this. One alteration you could make, is stick to using just the one link, to toggle the grid on/off. Then define a Javascript function within ‘script tags’, which would be something like:

    function ToggleGrid() {
    var grid = document.getElementById("grid-overlay")
    
    if (grid.style.display == "none") {
    grid.style.display = "block") 
    }else{
    grid.style.display = "none") 
    }
    }

    And call the function on your link, whereas before you had the Javascript itself:

    a href=”#” onclick=”ToggleGrid();”

    Hopefully this comment wont be stripped of the code! (This is purely an alternative and my syntax may be incorrect slightly.)

  2. Permalink to comment#

    Maybe my alternative is useless – just tried the example, and as you say – there needs to be the two links. Still, both could just call ToggleGrid();

  3. There’s also the “Display Line Guides” under the Miscellaneous tab of the Web Developer extension for Firefox. I find this to be very useful and easy to use.

    Another bonus is that there’s a “digital ruler” under the same tab that can be used to measure x and y coordinates on a page.

    However, your solution is probably better during the design stages. The web developer plugin could only be used each time you preview your site. It wouldn’t help you when moving objects around during development.

  4. @Lazlow: Yep, like you noticed, you still need two links, but putting the Javascript into a function is always a good idea.

  5. sansan
    Permalink to comment#

    Hey, Try this bookmarklet. o(∩_∩)o…

    javascript:(function(){if(window.d){document.body.removeChild(d);window.d = null;}else{window.d=document.createElement('div');d.style.id='grid_overlay';d.style.position='absolute';d.style.left='0';d.style.top='0';d.style.width='100%';d.style.height=(document.body.clientHeight>document.documentElement.clientHeight)?document.body.clientHeight+'px':'100%';d.style.background='url(http://pic.yupoo.com/itina/988324f5509f/q03z5507.jpg)';document.body.appendChild(d)}})();
  6. Permalink to comment#

    Nice try with that bookmarklet, but it sucks a little bit. Why?
    - long loading time of extrenal image
    - does not validate (cannot properly insert on page)

    Here is my version:

    javascript:(function(){if(window.d){document.body.removeChild(d);window.d=null;%7Delse{window.d=document.createElement(%27div%27);d.style.id=%27grid_overlay%27;d.style.position=%27absolute%27;d.style.left=%270%27;d.style.top=%270%27;d.style.width=%27100%%27;d.style.height=(document.body.clientHeight%3Edocument.documentElement.clientHeight)?document.body.clientHeight+%27px%27:%27100%%27;d.style.background=%27url%28data%3Aimage/png%2C%2589PNG%250D%250A%251A%250A%2500%2500%2500%250DIHDR%2500%2500%2500d%2500%2500%2500d%2508%2503%2500%2500%2500G%253Cef%2500%2500%2500%2519tEXtSoftware%2500Adobe%2520ImageReadyq%25C9e%253C%2500%2500%2500%2509PLTE%25FF%25C8%25C4%25FF%25EE%25ED%25FF%25FF%25FF%250C%25B6o%2514%2500%2500%2500%2503tRNS%25FF%25FF%2500%25D7%25CA%250DA%2500%2500%2500_IDATx%25DA%25EC%25D5%21%250E%2500%2520%250C%2504%25C1%2583%25FF%253F%251A%2585%25EF%25E1H%25A6%250A%25D3%258Ch6d%25D5%2593%2587%258D%257Dg%25FAJ%25BF%2501%2581%2540%2506%2588%25E2%21%2510%25C5%252B%251E%2502Q%25BC%25E2%21%2510%25C5%252B%251E%2502%25F9%2507%25C9%259D%25E9%252B%25FD%2586%259B%2540%2520%25FEx7%2581%2540%2514%25EF%2526%2510%2588%25E2%251D%251E%2502Q%25BC%25C3C%2520%25DD%25C6%2511%2560%2500S%2526E%25F7%25D8%2525%257D%25D5%2500%2500%2500%2500IEND%25AEB%2560%2582%29%27;document.body.appendChild(d)%7D%7D)();//http://taat.pl

    (escaped URL and embeded image)

    Check also this another technique:

    http://taat.pl/en/narzedzia/grid/

  7. Edwin
    Permalink to comment#

    Late reaction, I know, – still got a lot of your posts standing open to read, have to make more time for it – but I liked the tutorial. Maybe it’s nice to show you a handy tool if you don’t want to lay a ruler on your screen: Free ruler (Mac OSX)

  8. sadaf
    Permalink to comment#

    can anybody please tell me how to create datagrids using dwr. i am new to scripting language. plz help me

  9. Paul

    For those of you looking for girdmark, I have to take it down. I just don’t have the money to keep paying for hosting. If anyone would like to take over the project, send me an email at psayre23 [at] washington [dot] edu

  10. I have picked this up a few times since it was originally posted it is a great and simple concept. I am trying to take it to the next step now however with limited success.

    What I want to do next is to create a map reference overlay with this technique. So providing grid co-ordinates as an overlay using 100×100 squares.

    Anyone got any ideas that don’t involve create one giant png?

This comment thread is closed. If you have important information to share, you can always contact me.

*May or may not contain any actual "CSS" or "Tricks".