CSS3: On Grid Positioning and Layout

September 20, 2007

Topics: Semantics, Web standards.

Following up on tables and CSS, the grid model of layout execution is part of the CSS level 3 working draft. The specifications for the grid layout module being discussed were released on September 5, 2007.

This module describes integration of grid-based layout (similar to the grids traditionally used in books and newspapers) with CSS sizing and positioning. Document Abstract

Semantically, the grid layout system is a nice development — it is a system explicitly and exclusively designed for layout, which has no required HTML component. An excellent companion to the div element.

The concept of a grid framework has been applied in many graphic and typographic media for many years; including the web. Resources for constructing grids using CSS abound:

The deal with constructing a grid system using CSS is that it’s very difficult to do without using very complex code. The main new addition to CSS construction offered by CSS3 is the ability to align document elements across grid columns. This is a pretty nice additional feature, far more powerful and flexible than the feeble float construction.

The major changes evidenced in the CSS3 grid-layout, at the moment, are the additional CSS elements grid-columns and grid-rows. However, the grid-layout also takes significant advantage of extensions to the float element, which carries new attributes allowing you to specify the target location for the floated object, and a new measurement unit — the “grid unit” — equivalent to the distance between two adjacent grid lines.

An interesting thing about this measurement unit is that not all grid units will be equal — since you can specify a different measurement for columns (content bearing grid elements) and column-gaps (the space between columns.) An object given the width in grid units will span the appropriate number of grid units, regardless of the specific size of those units.

It looks complicated. There are a lot of new possibilities and new ways of approaching layout which will become available with the maturity of CSS3. However, assuming equal, standards-based implementations, I see no reason that this shouldn’t ultimately be far simpler than existing CSS layouts. A grid standard will enable, ultimately, far more consistent and reliable site design methods.

I just wish we didn’t have to wait so long…

Have something to contribute?




« Read my Comment Policy

1 Comment to “CSS3: On Grid Positioning and Layout”