Fluid Grids

In the latest A List Apart, Airbag Industries' Ethan Marcotte writes about designing fluid grids, rather than using the fixed pixel methods provided by most CSS layout frameworks. Marcotte describes that the technique of calculating percentages for column widths is the same method we use for calculating font sizes in ems.

To calculate fluid grid dimensions, we first take a base font size of 100%, which is usually 16px in the majority of browsers when not altered by the user. This becomes our context variable. Then we take the fixed pixel size we want to make fluid, e.g. a width in our fixed pixel design, and divide by the context variable, which gives us a relative value for our fluid grid.

Fluid grid equation

target ÷ context = result

For example a 700px column is calculated to be 43.75em.

700 ÷ 16 = 43.75

The one minor exception to the above is that you might have to shave a pixel off your target if you experience problems with your widths in IE because of that browser's rounding behavior.

Users of 960gs may be interested in using the fluid port of that framework.