YUI Library - Grids - Examples

Page Widths

Choose the overall page width.

• #doc - 750px centered (good for 800x600)
• #doc2 - 950px centered (good for 1024x768)
• #doc3 - 100% fluid (good for everybody)
• #doc-custom - an example of a custom page width

Templates

Optionally choose the secondary column's width and orientation with one of seven templates.

• .yui-t1 - Two columns, narrow on left, 160px
• .yui-t2 - Two columns, narrow on left, 180px
• .yui-t3 - Two columns, narrow on left, 300px
• .yui-t4 - Two columns, narrow on right, 180px
• .yui-t5 - Two columns, narrow on right, 240px
• .yui-t6 - Two columns, narrow on right, 300px
• .yui-t7 - One full-width column

Nesting Grids

Optionally nest standard grids (.yui-g) and special grids (.yui-b, ... .yui-f) to subdivide.

• .yui-g - Standard half grid (and nest again for quarters).
• .yui-gb - Special grid, 1/3 - 1/3 - 1/3
• .yui-gc - Special grid, 2/3 - 1/3
• .yui-gd - Special grid, 1/3 - 2/3
• .yui-ge - Special grid, 3/4 - 1/4
• .yui-gf - Special grid, 1/4 - 3/4