TAAT Technologie Cyfrowe

CSS Background Grid

Every good designer knows how importart is to take care about snapping to grid and keeping the rythm. Numerous professional grapic applications allow snapping object to grid. But finally, web design must be sliced and set up using CSS. But there is no text editor with background grid option.

Grid Using CSS Background

The simplest way to have a grid, is to use a background image with with lines, and repeat it side by side. Here is a sample:

#element { background: grid_image.gif; }

But there's one thing more: you have to prepare this image, using color and dimmenssions you prefer, by your self.

My smart grid

Here's a simple but efective solution I use. I've prepared a dynamic library of ready to use background grid images. Images are stored in http://taat.pl/grid/. Image names are in the following format:


width and height are horizontal and vertical grid dimmensions in pixels, and color and backgroundcolor are traditional HTML color values.

backgroundcolor name is optional. When it's ommited, transparent background is used.


I use it for design time using CSS rules similar to this:

html { background: url(http://taat.pl/grid/16x16_lightgray.gif); }

Working Example

Just see the working CSS grid example.

Further reading