If we were summarizing the history of webpage layout technologies, it would look something like the following.

• 1990 — 1993: Before the Dawn of Civilization. Wandering hunter-gatherer tribes use only the primitive tools available to them: headings, lists, paragraphs.
• 1994 — 1997: The Tabular Empire. The invention of the “sidebar”. Enterprising tribes settle down and begin building magnificently complex structures.
• 1998 — 1999: The Baroque Period. Monuments constructed by the Tabular Empire grow increasingly ornate and unstable. The Browser Wars threaten all civilization. Meanwhile, barbarians lurk out in the steppes, armed with increasingly sophisticated div weaponry.
• 2000 — 2002: The Dark Ages. The economy collapses. Citizens flee into the unprotected wilderness, and many are absorbed into the barbarian tribes and learn their ways. It takes secret black magic to get anything to work at all. Only the greatest shamans are able to build anything in this cold, hostile environment.
• 2003 — 2005: The Renaissance. People begin sharing knowledge. Great new schools of thought begin to arise on how to work around browser quirks.
• 2006 — 2010: The Age of Enlightenment. Systematic investigation of the browser universe. Knowledge is codified. The rise of CSS frameworks.

My CSS framework of choice has long been my own employer’s YUI. YUI Fonts and YUI Reset (or their moral equivalents from other frameworks) have always been no-brainers. But YUI 2 Grids has always been more optional.

As an example, take this site’s layout. It’s currently a single column, so no need for a grid there. However, it does actually put two columns next to each other in a couple places — in the Comments form and in the footer. So I could have used Grids… but chose not to. First, YUI 2 Grids is several KB, which is large enough that I didn’t want to just throw it in there if I wasn’t sure I was going to use it. Second, it’s complicated enough (with its nested doc3s and yui-t6s and yui-u firsts and whatnot) that for simple things it’s easier to just do a homebrew solution. Float a div over, style it, peek at it in a couple browsers, and hope for the best.

That’s all changed with the recent release of YUI 3 Grids, new in YUI 3.2.0. Not only is this version tiny (1.5 KB), but it’s the first layout system I’ve ever used where I can just write out whatever grid I want from memory, without ever needing to look at the docs. Observe:

<div class="yui3-g">
  <div class="yui3-u-1-3">
    <p>1/3</p>
  </div>
  <div class="yui3-u-2-3">
    <p>2/3</p>
  </div>
</div>

View results here.

You can slice and dice up the parent yui3-g div into as many units as you like using yui3-u-numerator-denominator, going all the way down to 1/24ths. Or you can use generic yui-us and fix the widths of each unit to a particular pixel.

Nesting is straightforward as well. Just spawn a new yui3-g, and everything works as expected.

<div class="yui3-g">
  <div class="yui3-u-1-3">
    <p>1/3</p>
  </div>
  <div class="yui3-u-2-3">
    <div class="yui3-g">
      <div class="yui3-u-1-2">
        <p>2/3 * 1/2</p>
      </div>
      <div class="yui3-u-1-2">
        <p>2/3 * 1/2</p>
      </div>
    </div>
  </div>
</div>

View results here.

I’ve also been playing around with weird edge cases. At work, I have a project that generates 1-4 widgets in rows. I was curious to see what would happen with Grids if you leave a column out:

<div class="yui3-g">
  <div class="yui3-u-1-4">
    <p>1/4</p>
  </div>
  <div class="yui3-u-1-4">
    <p>1/4</p>
  </div>
  <div class="yui3-u-1-4">
    <p>1/4</p>
  </div>
  <-- Ruh-oh, missing div! -->
</div>

View results here.

Grids does the right thing again: it fills up the space with three columns, and leaves the fourth slot empty. This meant that I wasn’t forced to create a dummy div to fill up the space, which slightly simplified my backend code. Not that this was a huge win or anything, but still, a happy moment.

So I think at this point, there’s not a single site where I wouldn’t just go ahead and use all three of Reset, Fonts, and Grids. Huge thanks to Matt Sweeney for architecting the new Grids. It was worth the wait.