Grids swissmiss

Grids

Aaron Gustafson recently published an article on A List Apart in which he proposes some Javascript to wrestle images into place. The problem being that you, the designer, come up with a perfect flexible grid which requires images to conform to one of a number of pre-defined sizes. Except the ensuing content creators inevitably ignore these rules and upload images of sizes which suit them best (for whatever reason). Instead of forcing the CMS to resize the images, Aaron’s script calculates how the image should fit into your grid and retrospectively applies CSS classes accordingly. Clever stuff (even if it does require Prototype).

A week ago, Jon Hicks twittered thusly:

Hicksy wonders if someone clever with javascript can come up with a background grid thing, that can be toggled on/off via keyboard

Mere days later, Stephen Hallgren came up with Grid Layouts.com, a magnificently handy bit of code for toggling a grid on and off straight from the keyboard using ctrl+shift+g.

And so to the CSS 3 module CSS Grid Positioning which was recently released as a working draft. The official description:

An element with columns (as in Multi-column Layout) establishes an implicit grid. Together with optional explicit grid lines, that establishes a coordinate system for positioning floats and absolutely positioned boxes. This module proposes properties to position and size floating boxes relative to this grid.

Essentially the module will enable authors to define a grid and then position content elements with that grid, allowing for column spanning, and content flow around positioned elements. If/when it ever comes to fruition, this will be a fantastic addition to CSS, so much so that it might actually make it easier to create tightly gridded layouts on the Web than in conventional print layout software.