This is part of a YUI! Grids builder. This is what builds the grids body (bd) and it starts with a basic template:
Code:
div = new Ext.DomHelper.Template('<div class="{cls}">{ctn}</div>');
div.compile();
And some basic units and grids:
Code:
var apply = function(v) { return div.applyTemplate(v); };

// basic units
var u  = apply({cls: 'yui-u', ctn: 'my content'});
var uf = apply({cls: 'yui-u first', ctn: 'my content'});
// basic grids
var g  = apply({cls: 'yui-g', ctn: uf + u});
var gf = apply({cls: 'yui-g first', ctn: uf + u});
Voilá! We have TEN template grids ready to go! This switch template types:
Code:
switch(type) {
    case 'g1':
        // 1
        cfg = {cls: 'yui-g', ctn: 'my content'};
        break;
    case 'g2':
        // 1/2 - 1/2 (g)
        cfg = {cls: 'yui-g', ctn: uf + u};
        break;
    case 'g3':
        // 1/4 - 1/4 - 1/4 - 1/4
        cfg = {cls: 'yui-g', ctn: gf + g};
        break;
    case 'g4':
        // 1/2 - 1/4 - 1/4
        cfg = {cls: 'yui-g', ctn: uf + g};
        break;
    case 'g5':
        // 1/4 - 1/4 - 1/2
        cfg = {cls: 'yui-g', ctn: gf + u};
        break;
    // Special grids.
    case 'yui-gb':
        // 1/3 - 1/3 - 1/3
        cfg = {cls: type, ctn: uf + u + u};
        break;
    case 'yui-gc':
        // 2/3 - 1/3
    case 'yui-gd':
        // 1/3 - 2/3
    case 'yui-ge':
        // 3/4 - 1/4
    case 'yui-gf':
        // 1/4 - 3/4
        cfg = {cls: type, ctn: uf + u};
        break;
}
tpl = apply(cfg);
Haha! Man, I had a lot of fun building this. Soon an app based on it will be available. :-D