CSS Grids: Nesting Grids
YUI CSS Grids provides a system for subdividing sections of your page with Nesting Grids. These Nesting Grids tell their child units how to divide space. Depending on the holder's class the children divide space differently.
The default grid holder is div.yui-g which tells its two child units, div.yui-u, to evenly divide the available space. Several special grid holders are available for non-50%/50% splits.
YUI CSS Grids' Nesting Grids
By choosing a different class for the grid holder, child units divide space differently. This example shows all of the available Nesting Grids stacked in the same example.
Basis Markup Structure
Available Nesting Grid Holders
| Class | Description |
|---|---|
.yui-gb |
1/3 - 1/3 - 1/3 |
.yui-gc |
2/3 - 1/3 |
.yui-gd |
1/3 - 2/3 |
.yui-ge |
3/4 - 1/4 |
.yui-gf |
1/4 - 3/4 |
Note:
Because CSS examples are susceptible to other CSS on the page, this example is only available in a new window at the above link.
