Yahoo!

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.