YUI Library Examples: Grids CSS: Preset Template 3, 300px left

Using the Preset Templates in YUI Grids for common two-column layouts

YUI Grids CSS offers three ways to control your page layout. Preset Templates are two-column layouts of common dimensions; they have one narrow column with a fixed width and second column that takes up the remainder of the space offered by the overall page width. You can use these Preset Templates by themselves, or combine them with Grids' page width control and/or Nesting Grids.

Use any of Grids' six available Preset Templates by following these three simple steps. First, define two content blocks (.yui-b) in your markup document.

The second step is to choose one of the two blocks, or columns, to be the wider "main" column. Indicate your choice by wrapping that div.yui-b node in a div#yui-main node. Don't worry about source-order because your main block can come first or second in the source without impacting the final visual layout.

The final step is to decide which Preset Template you wish to use, and to apply the corresponding class to a containing div. In this case I've chosen the .yui-t3 class, which makes the narrow non-main column 300px and on the left side.

Here's a list of the available Preset Template classes:

div.yui-t1 creates a narrow column on the left with 160px width.
div.yui-t2 creates a narrow column on the left with 180px width.
div.yui-t3 creates a narrow column on the left with 300px width.
div.yui-t4 creates a narrow column on the right with 180px width.
div.yui-t5 creates a narrow column on the right with 240px width.
div.yui-t6 creates a narrow column on the right with 300px width.

Open this example in a new window to see the div.yui-t3 which is a left-aligned narrow column of 300px.

Configuration for This Example

You can load the necessary JavaScript and CSS for this example from Yahoo's servers. Click here to load the YUI Dependency Configurator with all of this example's dependencies preconfigured.

Grids CSS Examples:

More Grids CSS Resources:

User's Guide (external)
Cheat Sheet PDF (external)