Comments on: Nested Grids in YUI Grids CSS

By: Twitter Trackbacks for Nested Grids in YUI Grids CSS | Agile Webmasters [agilewebmasters.com] on Topsy.com

Thu, 24 Feb 2011 10:46:25 +0000

[...] 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 [...]

By: Stuart

Stuart — Thu, 06 Aug 2009 12:11:48 +0000

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.

By: Rui Zhang

Rui Zhang — Thu, 21 May 2009 18:36:16 +0000

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).

By: fernando trasviña

fernando trasviña — Thu, 14 May 2009 17:21:16 +0000

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#