YUI Grids实现自定义宽度的Template

也许有些人不喜欢用YUI的CSS，但是我觉得这个对我来说，简直是太方便了，特别是如果你赞同Yahoo的栅格理论的话，YUI Css几乎可以用在你所有的项目上。但是也有缺陷，YUI预设的Template中只为我们提供了六种预设的模板，并没有像整个页面那样提供一个可以自定义的标签，那么当我们的需求需要实现不同的宽度的时候，就只有自定义了，我的目标是实现一个符合yui-t规则的自定义样式。

在进行之前，首先了解一下YUI所使用的尺寸单位：em。作为一个相对单位，1em是指当前一个字体的大小，例如你将一个字体设置为14px，那么1em=14px了。选用相对度量单位的好处就是我们可以更改网页中文字的大小，而且这个好像是美国的 803 法案要求网页必须对于视力弱的人所具有的功能。但并不是px就没有了作用，我们的页面必须限制在一个宽度范围内以防止变形，所以 min-width 的设置就必须用px了。

#doc,#doc2,#doc3,#doc4,.yui-t1,.yui-t2,.yui-t3,.yui-t4,.yui-t5,.yui-t6,.yui-t7 { margin:auto;text-align:left; width:57.69em; *width:56.301em; min-width:750px;}

下面进入正题，我需要设置一个页面宽度800px，然后右边有一个350px宽的侧栏，如何写呢？

先计算一下页面宽度：800/13 = 61.54em; (For None IE) 800/13.3333 = 60.00em; (For IE)

侧栏宽度：350/13 = 26.92em (For None IE) 350/13.3333 = 26.25em; (For IE)

那么参考 yui-t1 的写法，我们可以知道了：

.yui-t-custom, doc-custom { margin:auto; text-align:left; width:69.46em; *width:67.73em; min-width:750px; } .yui-t-custom #yui-main { float:left; margin-right:-25em; } .yui-t-custom .yui-b { float:right; width:26.92em; *width:26.25em; } .yui-t-custom #yui-main .yui-b { margin-right:27.92em; *margin-right:27.25em; }

Ok，大功告成

参考资料： 1、YUI Css Grids and customization