rocco augusto

Designing Your CSS with A Grid Overlay

A few weeks ago I was sitting around the table with a few of my friends discussing random tidbits about our jobs in the web development world. One of my friends who mostly does graphic design and a bit off CSS styling was complaining about the lack of a grid overlay for CSS programming like you could find available in Adobe’s Fireworks and Photoshop suites.

After sitting around and thinking about it for a second or two, I realized there was no reason why there could not be such a solution available. With a little bit of CSS and PNG magic, anyone working with CSS could have that nifty grid in no time at all!

Creating The Graphics

First thing that needed to be accomplished creating the actual graphic that would be used as our grid element. To do this, I opened up Adobe Fireworks and created a new document with the following settings:

1. Width: 9px
2. Height: 9px
3. Resolution: 72px/in
4. Canvas Color: Transparent

(Figure 1: New document set up screen in Adobe Fireworks 8)

On your shiny brand new blank canvas, select the rectangle tool and create an 11×11px square. Move this square over to the bottom left of your canvas so the top and right hand side of the square are floating off the edge of the canvas.

(Figure 2: After creating and positioning your new square, your canvas should look like this)

With your item selected, go to your properties panel and change your transparency to 20%. You should now be able to see your canvas through your square. Save this item out as a PNG with the name of "grid", we will need this later! Now you can close Fireworks. Congratulations, you’re done with the graphics portions of this tutorial!

(Figure 3: You can save your transparency as whatever you want, but for the sake of this tutorial we will save it out as 20%)

The Magnificent Code

Now that the easy part is done, we will tackle the code. To be honest, this part is pretty easy as well. For starters, I created a basic HTML page and added some lovely Lorim Ipsum content into it. Since this isn’t a tutorial about working with CSS, I am just going to post the basic HTML and CSS markup without explaining what it does. If you’re familiar with CSS, this should be a piece cake for you!

The HTML

As you can see here, all the code consist of is a div container with an ID of "wrapper" to hold all of the content. Inside of the wrapper container you have two more containers, one with an ID of "head" for the header content and one with an ID of "content" the actual content.

The CSS

The CSS is as basic as the HTML. Not much to see here really. All we are doing is centering the container named wrapper so that it lies in the middle of the page and adding an ugly yellow background to it. Around the content container we are adding an equally ugly green border to help the content stand out a little. I have included a screenshot below so you can see the loveliness of the current page! You can also check out this example page.

(Figure 4: The content in all of its glory!)

Now that we have the basic page setup we can create the fun part — The grid. This is as simple as creating the graphics. What we are doing is wrapping the wrapper container in a div with a class called "grid", like below. The bolded areas are the areas where changes in the code took place.

Grid HTML

The CSS is really were the real changes take place. Everything here is pretty basic. If you look at all the bolded elements you will see that I gave the body a z-index of 0 (zero) and I gave #wrapper a z-index of -1 (negative one). I then created a class named grid and gave it a z-index of 1000 (one thousand) as well as taking the image we made previously and making that a repeating background image.

The CSS

(Figure 5: The finished product! A nifty page with a nice grid overlay)

Internet Explorer 7 Support

For those of you using Microsoft’s Internet Explorer 7, it is possible to use this method to have IE7 display the grid over your your content. I have used a quick method to accomplish this by using conditional comments. Once you have your conditional comments, you really only have to change one line of code and you can have Internet Explorer 7 up and running in no time!

Voila! You now have a grid overlay on top of the page you are designing! You can view the finished work by checking out example page 2. I know, I know, fancy! Now if you prefer larger images for your fancy new grid, have no fear! I already went through the trouble of creating various sized PNGs that are ready to be uploaded and used. The included grid sizes are 10px, 20px, 25px, 30px, 40px and 50px. You can download them, along with this tutorial, from here. or from the link below.

DOWNLOAD TUTORIAL