Yahoo CSS Grids

Two days ago Yahoo released an update to their design patterns that features a cool way to build a buttload of layouts using what they call Grids.

What's great is that you can easily convert your HTML into one-column, two-column, four-column by just changing the classes of some of the divs. What's more, the grids and all resultant layouts are supported in all the major browsers--they're A grade supported.

I just ran the CSS validator on one of the layouts and had a few errors, so I'll be looking into this a bit more, but it looks promising. Actually, it looks like an IE hack.

From Yahoo (I especially like the 100 layouts with one 1.82KB CSS file part):

  • Full A-grade browser support
  • More than 100 page layouts with a single CSS file at just 1.82KB
  • Flexible scaling with user font-size adjustments
  • Min-width enforcement, regardless of font or viewport size (except IE; helper JS under consideration)
  • Abundant DOM hooks for CSS and scripting flexibility
  • Source-order independence, allowing you to place your most important body content first in your HTML document
  • Self-clearing footer (no matter which column is longer, the footer stays at the bottom)
  • Centering within the viewport by default
  • Forward-compatibility as standard page structure evolves to claim more screen real estate
  • Accommodation for IAB Advertising Units