Nested Grids in YUI Grids CSS

Posted by – February 17, 2009

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!

4 Comments on Nested Grids in YUI Grids CSS

  1. The problem of nesting is due to the sub pixel rounding technique used by yui (margins based on percentages).
    .first adds margin-left:0; to the div.

    This brings us that removing the margin-left:0 breaks the layout, that is why you cant nest in other yui-g#

  2. Rui Zhang says:

    Thanks for the solutions. I was having the same issue and couldn’t create the 25%, 50%, 25% layout through nesting the second column(unit).

  3. Stuart says:

    Nice to see someone else getting to grips with the YUI grids nesting ‘issues’. It’s a great system and hat-tip to Nate for coming up with it, but it does have a couple of holes. If you nest a yui-gc within a yui-ge using the above information it will take the yui-ge distribution and apply it to the yui-gc children yui-u. Thus you get 74% / 25% children rather than the 66% / 33% you were after.
    Looking at the un-minified css you can see Nate added a fix for this situation but with yui-gd within yui-ge, so if you addapt that to give:

    /* Patch for GC within GE */
    .yui-ge div.first .yui-gc .yui-u {
    width: 32%;
    }
    .yui-ge div.first .yui-gc div.first {
    width: 65%;
    }

    then your nested children retain the correct dimensions. Hooray!

    Have to say I love YUI grids, it just gives such a reliable even playing field to work with.

  4. [...] Nested Grids in YUI Grids CSS | Agile Webmasters agilewebmasters.com/nick/nested-grids-in-yui-grids-css/ – view page – cached 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 [...]

Leave a Reply to Stuart Cancel reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>