Agile Webmasters

Today I was trying to achieve a 25%|50%|25% layout within the main block of my YUI Grid CSS layout. Everything I read in documentation seemed to indicate you could nest grids in any way you desire. So I tried doing the following:

    <div class="yui-gf">
      <div class="yui-u first">
        <p>First Column (25%)</p>
      </div>
      <div class="yui-u">
        <div class="yui-gc">
          <div class="yui-u first">
            <p>2nd Column (50%)</p>
          </div>
          <div class="yui-u">
            <p>3rd Column (25%)</p>
          </div>
        </div>
      </div>
    </div>

However this didn’t work, it appears you can only nest grids in the ‘first’ column, unless you are using ‘yui-g’ (instead of one of the alternate layouts, such as yui-gc above). I couldn’t find this documented anywhere, but I don’t know why else the above code wouldn’t work.

I asked for help on twitter, and senior Yahoo engineer and CSS component author Nate Koechley (@natekoechley) was kind enough to point me to this solution. It appears that moving the nested grid under the ‘first’ unit fixes the problem. Of course, then you have to change which grids you are using, as follows:

<div class="yui-ge">
  <div class="yui-u first">
    <div class="yui-gd">
      <div class="yui-u first">
        <p>First Column (25%)</p>
      </div>
      <div class="yui-u">
        <p>2nd Column (50%)</p>
      </div>
    </div>
  </div>
  <div class="yui-u">
    <p>3rd Column (25%)</p>
  </div>
</div>

This seems to reinforce my hypothesis that nesting of alternate grid layouts can only be done under the first grid unit. Is this by design, or is it a bug? If anyone has any insight, please let me know in the comments.

Working off the above code, I decided I might as well clean it up a little bit. Nate Koechley himself says that if you are going to use a nested grid, you do not need to enclose that grid in a grid unit div (in other words, a grid container can act as a grid unit). This was said during his YUI CSS Foundation speech (about 24 minutes in).

However, I quickly found that removing the first grid unit div broke the layout. As this goes against what Nate has said publicly, I am curious if this is a bug or if he misspoke in his presentation. Here is the non-working code:

<div class="yui-ge">
  <div class="yui-gd first">
    <div class="yui-u first">
      <p>First Column (25%)</p>
    </div>
    <div class="yui-u">
      <p>2nd Column (50%)</p>
    </div>
  </div>
  <div class="yui-u">
    <p>3rd Column (25%)</p>
  </div>
</div>

I would like to point out that I am loving the idea of the YUI Grid CSS, and am hoping to utilize it in all my future projects. All of the issues I have discovered thus far are not deal breakers. I am simply looking to master the framework in a basic testing environment, so I’m not wresting with it in a complex, large scale implementation. So again, if anyone has any insight, I would be happy to hear it!