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_height_color_backgroundcolor.gifwidth 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.
Examples
- Example 1 —
16×16 pixels red grid with transparent background:
http://taat.pl/grid/16x16_red.gif - Example 2 —
200×100 pixels yellow grid with black background:
http://taat.pl/grid/200x100_yellow_000000.gif - Example 3 —
100×18 pixels gray grid with transparent background:
http://taat.pl/grid/100x18_ccc_transparent.gif - Example 4 — using two grids to determine line height and column golden ratio.
- and any dimmensions or colors you wish
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.