Building a layout for YUI3 CSS Grids from JS with WidgetParent/WidgetChild

gistfile1.js

YUI.add('jsgrids', function (Y) {
	
	Y.Grid = Y.Base.create('g', Y.Widget, [Y.WidgetParent, Y.WidgetChild], {
		CONTENT_TEMPLATE: null
	}, {
		ATTRS: {
			defaultChildType: {
				value: 'Unit'
			}
		}
	});
	
	Y.Unit = Y.Base.create('unit', Y.Widget, [Y.WidgetParent, Y.WidgetChild], {
		renderUI: function () {
			var size = this.get('size');
			size = size ? ('-' + size) : size;
			this.get('boundingBox').addClass('yui3-u' + size);
		},
		syncUI: function () {
			this.get('contentBox').setContent(this.get('content'));
		}
	}, {
		ATTRS: {
			content: {
				value: ''
			},
			size: {
				value: ''
			}
		}
	});
	
    
}, '0.0.1' ,{
    requires:['widget', 'widget-parent', 'widget-child']
});

YUI().use('cssgrids', 'jsgrids', function (Y) {
	
	var page = new Y.Grid({
		children: [{
			id: 'hd',
			size: '1',
			content: '<div>Hd Panel</div>'
		}, {
			childType: Y.Grid,
			id: 'bd',
			children: [{
				id: 'nav',
				size: '1-3',
				content: '<div>navPanel</div>'
			}, {
				id: 'main',
				size: '1-3',
				content: '<div>mainPanel</div>'
			}, {
				id: 'extra',
				size: '1-3',
				content: '<div>extraPanel</div>'
			}]
		}, {
			id: 'ft',
			size: '1',
			content: '<div>Ft Panel</div>'
		}]
	});
	page.render();
	
});