Page 2 of 8

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 combinations 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.

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.

Cillum dolore eu fugiat nulla

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Sunt in culpa qui officia deserunt

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est.

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%.

Cillum dolore eu fugiat nulla sed do eiusmod

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea.

Sunt in culpa qui

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia.

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%.

Sunt in culpa qui

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est.

Cillum dolore eu fugiat nulla sed do eiusmod

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi.

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%.

Cillum dolore eu fugiat nulla sed do eiusmod tempor

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse.

Sunt in culpa qui

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est.

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%.

Sunt in culpa qui

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est.

Cillum dolore eu fugiat nulla sed do eiusmod tempor

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat.

Example 6: 33% | 33% | 33%

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

Cillum dolore eu fugiat

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore.

Sunt in culpa qui officia

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia.

Qui deserunt mollit

Excepteur sint occaecat cupidatat non proident, sunt in mollit anim id est.

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

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

Excepteur sit

Excepteur sint occaecat cupidatat non proident, sunt in mollit anim.

Occaecat cupida

Excepteur sint occaecat cupidatat non proident, sunt in est mollit.

Cillum dolor

Excepteur sint occaecat cupidatat non proident, sunt anim id est.

Volup velit

Excepteur sint occaecat cupidatat non, sunt in mollit anim id est proident.

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

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

Ecept sint

Excepteur sint occaecat cupidatat non, in mollit anim.

Occa cupat

Excepteur sint occaecat cupidatat, sunt in est.

Cillum dolor

Excepteur sint occaecat cupidatat proident, anim.

Volupta veli

Excepteur sint occaecat cupidatat, sunt in mollit ani.

Sint ocat

Excepteur sint occaecat cupidatat non proident.

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: