YUI 3.x Home -

YUI Library Examples: CSS Grids: Nesting Grids

Note: This is YUI 3.x. Looking for YUI 2.x?

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

Because CSS examples are susceptible to other CSS on the page, this example is only available in a new window at the above link.

Copyright © 2008 Yahoo! Inc. All rights reserved.

Privacy Policy - Terms of Service - Copyright Policy - Job Openings