One of the things that makes Morph so awesome, is its tight integration with Yahoo's YUI Grids CSS library. This is mostly evident in the numerous different layout combination's that are possible with Morph, but one of the lesser known features is the ability to take advantage of the grids library in your content. Not only does this let you create sexy page layouts with ease, but also that yours sites coder is cleaner, thanks to the reusable classes that are used throughout.

table

Example 1: 50^% | 50^% (default)

This example shows the default 50/50 split and can be used to display two blocks of content side by side, with each taking up half of the available space.

{tab=Example Output}

{tab=Code Used} {code}<div class="grid yui-g"> <div class="yui-u first"> <h4></h4> <p></p> </div> <div class="yui-u"> <h4></h4> <p></p> </div> </div>{/code} {/tabs}

Zen Coding short code: div.yui-g>div.yui-u*2

Example 2: 66^% | 33^%

This example shows two blocks of content, with the first taking up 66% of the available space and the second taking up the remaining 33%.

{tab=Example Output}

{tab=Code Used} {code}<div class="grid yui-gc"> <div class="yui-u first"> <h4></h4> <p></p> </div> <div class="yui-u"> <h4></h4> <p></p> </div> </div>{/code} {/tabs}

Zen Coding short code: div.grid.yui-gc>div.yui-u*2

Example 3: 33^% | 66^%

This example shows two blocks of content, with the first taking up 33% of the available space and the second taking up the remaining 66%.

{tab=Example Output}

{tab=Code Used} {code}<div class="grid yui-gd"> <div class="yui-u first"> <h4></h4> <p></p> </div> <div class="yui-u"> <h4></h4> <p></p> </div> </div>{/code} {/tabs}

Zen Coding short code: div.grid.yui-gd>div.yui-u*2

Example 4: 75^% | 25^%

This example shows two blocks of content, with the first taking up 75% of the available space and the second taking up the remaining 25%.

{tab=Example Output}

{tab=Code Used} {code}<div class="grid yui-ge"> <div class="yui-u first"> <h4></h4> <p></p> </div> <div class="yui-u"> <h4></h4> <p></p> </div> </div>{/code} {/tabs}

Zen Coding short code: div.grid.yui-ge>div.yui-u*2

Example 5: 25^% | 75^%

This example shows two blocks of content, with the first taking up 25% of the available space and the second taking up the remaining 75%.

{tab=Example Output}

{tab=Code Used} {code}<div class="grid yui-gf"> <div class="yui-u first"> <h4></h4> <p></p> </div> <div class="yui-u"> <h4></h4> <p></p> </div> </div>{/code} {/tabs}

Zen Coding short code: div.grid.yui-gf>div.yui-u*2

Example 6: 33^% | 33^% | 33^%

This example shows three blocks of content, with with each taking up 33% of the available space.

{tab=Example Output}

{tab=Code Used} {code}<div class="grid yui-gb"> <div class="yui-u first"> <h4></h4> <p></p> </div> <div class="yui-u"> <h4></h4> <p></p> </div> <div class="yui-u"> <h4></h4> <p></p> </div> </div>{/code} {/tabs}

Zen Coding short code: div.yui-g>div.yui-u*3

Example 7: 25^% | 25^% | 25^% | 25^%

This example shows four blocks of content, with with each taking up 25% of the available space.

{tab=Example Output}

{tab=Code Used} {code}<div class="grid yui-g4"> <div class="yui-u first"> <h4></h4> <p></p> </div> <div class="yui-u"> <h4></h4> <p></p> </div> <div class="yui-u"> <h4></h4> <p></p> </div> <div class="yui-u"> <h4></h4> <p></p> </div> </div>{/code} {/tabs}

Zen Coding short code: div.yui-g4>div.yui-u*4

Example 8: 20^% | 20^% | 20^% | 20^% | 20^%

This example shows five blocks of content, with with each taking up 20% of the available space.

{tab=Example Output}

{tab=Code Used} {code}<div class="grid yui-g5"> <div class="yui-u first"> <h4></h4> <p></p> </div> <div class="yui-u"> <h4></h4> <p></p> </div> <div class="yui-u"> <h4></h4> <p></p> </div> <div class="yui-u"> <h4></h4> <p></p> </div> <div class="yui-u"> <h4></h4> <p></p> </div> </div>{/code} {/tabs}

Zen Coding short code: div.yui-g5>div.yui-u*5

Grids Quick Reference:

Below is a list of classes that you can use in your content. View the source code of this page for specific code examples.

.yui-g

50/50 split (default)

.yui-gb

66/33 split

.yui-gd

33/66 Split

.yui-ge

75/25 Split

.yui-gf

25/75 Split

.yui-gc

33/33/33 Split

.yui-g4

25/25/25/25 Split

.yui-g5

20/20/20/20/20 Split

Related tutorials:

• YUI CSS Framework Tutorial, by Mike Sweeney, TheWebSqueeze.
• Crash Course: YUI Grids, by Andrew Burgess, Themeforest Blog.