Grids have existed for a very long time in graphic design. Long before the internet was born, graphic designers were using grid systems in their designs. Thanks to people like Khoi Vin and Mark Boulton (and many others I am ignoring for the sake of brevity) grid systems have significantly gained popularity in web design. An example of one of the most commonly used grid systems today is probably the 960 Grid System, which is also a nice CSS framework.
But making a proper grid with semantically correct html and CSS has long been a serious pain in the ass. Today, we still need superfluous <div> elements and the least you can say about the CSS code required to make it work, is that it is needlessly complex.
Thanks to the wonderful work on the CSS3 spec, easily crafting flexible, multi-column layouts with a minimal use of CSS is slowly becoming reality. Making flexible horizontal grids with CSS will soon be as straightforward as defining column-count, column-width, column-gap and column-space-distribution properties on your containing html element.
This made me think. Apparently, the CSS3 contributors have somewhat ignored vertical rhythm grids/typographic grids/baseline grids/whatever you like to call it. The same kind of problem that exist with horizontal grids, also exists with baseline grids.
And CSS3 is not fixing it.
So, let us talk baseline grids. Those of you that are familiar with InDesign, probably know what I am talking about. If you have never set a baseline grid, now might be a good time to start exploring the possibilities. Take a look at the following image:
Found on the ever-wonderful Typophile
As you can probably see, design can easily benefit from a properly set baseline grid. Yes, you can set baseline grids by hand. But setting baseline grids on the web is, well, less than straight-forward.
I am not arguing that everything should be aligned to a baseline grid. For the love of creativity, please do not! A CSS3.x implementation of baseline-grid, on the other hand, would be most welcome at times. Is my head too high in the sky for dreaming of this?