Nesting grids to create a multi-column layout

[wienerdog]

I just discovered Yahoo's UI CSS system, which creates a nested div grid system to create a multi-column layout template.

I'm still getting a handle on using relative sizing for page layout. I've traditionally been very limited and overly controlling by using pixels for just about everything, but I've come to learn of the accessibility issues involved with such a strict design policy.

I'm still trying to get a handle on the inconsistent gutters between columns. For instance, it seems the 4-column layout has a real tight gutter between the 3rd and 4th columns.

Here's what it looks like:

http://developer.yahoo.com/yui/examples/grids/grids-gg_source.html

[shalom_m]

I am still trying to sort out the code.
Will have to save and take it in part by part.

[tZ]

Have you watched the video?

The video explains these inconsistencies in more depth.

The short of it is that these inconsistencies are a necessary evil. You either learn to adapt and accept them or avoid using the yui-grid system. This happens due to the way the framework calculates the column and gutter width – using percentages. Thus, not every calculation is going to end with a whole number. Therefore, the browser must round these calculations and because of this inconsistencies occur. You can't have something be 5.5px – no such thing/way to render half a pixel.

[DC1]

Don't forget http://960.gs/ and http://code.google.com/p/blueprintcss/

[wienerdog]

Hmm... these are interesting. Thanks!