[转载]网页栅格系统研究（4）：技术实现

前三篇文章中，明确了栅格系统的设计细节和适用范围。这一篇将集中讨论960栅格系统的技术实现。

以上三栏布局的代码为：

上面是基本功能，Blueprint还支持<code>append-n, prepend-m, border</code>等“高级”功能，这些就不细说了。Blueprint的特点简单总结如下：

采用浮动来实现布局，简单明了

950两侧没有margin, 最后一列的class需要加上<code>last</code>

采用额外标签来清除浮动

上面就构建了三栏布局：

有意思的几点：

margin是均匀放在950两侧的

所有grid除了宽度不同，左右边距都一致<code>margin: 0 10px;</code>

代码简单清晰，起始和结束列不需要添加额外class

注意，demo链接中的宽度是750的，但我们只要将<code>&lt;div id="doc"&gt;&lt;/div&gt;</code>中的id改为<code>doc2</code>, 页面宽度就自动变为950宽了（YUI非常强大^o^）。来看下dom结构：

采用的也是浮动布局，简化后的CSS代码为：

YUI的特点是：

依旧是采用浮动布局，槽（Gutter）宽通过<code>margin-left</code>来控制（Blueprint采用右边距，960.gs采用均分，这三个框架对槽的处理实在有意思）

总宽度采用em, 这样可以用在弹性布局上

栏的布局用的是百分比，采用了流体布局

YUI的好处是能用来做自适应布局，在这前面两个框架里是没有的。但普通的定宽布局，YUI则显得有点麻烦，比如我们要实现四栏布局，dom得这样写：

先来两个两栏布局，再细分为四栏布局，清晰度上欠佳。

肯定还有非常多的栅格化实现方案，这里就不一一挖掘了。

关于命名：<code>.grid-c2-s6</code>表示两栏（<code>c2: column 2</code>）布局，<code>sub</code>栏的宽度是4列（<code>s4: sub width is 4 * 40 -10</code>）. 而<code>.grid-c2-s6f</code>, 最后的<code>f</code>表示两栏布局的第二种情况，即<code>sub</code>和<code>main</code>互换。类似地，<code>.grid-c3-s5e6d</code>表示三栏布局，其中<code>sub</code>栏的宽度是5, <code>extra</code>栏的宽度是6, 最后的<code>d</code>表示是<code>s5e6</code>三栏布局中的第四种情况。

为了方便使用，将最常用的两栏布局<code>.grid-c2-s5</code>用<code>.grid-c2</code>直接表示。同样的，<code>.grid-c3</code>表示<code>.grid-c3-s5e6</code>. 这是淘宝的默认值，其他站点可以根据实际情况修改。

这套布局符合渐进增强式工作流程。细心的你可能已经发现，所有两栏布局和三栏布局，HTML中的DOM结构是完全一样的，只有最外层<code>div</code>的<code>class</code>不同。如果要交换左右栏，只要非常简单的修改下<code>class</code>就可以。

栅格系统更多的是一种布局思想，在实际使用时，根据具体需求选用合适的技术来实现即可。需要注意的是，对于栅格的技术实现来说，太灵活未必是件好事，适度灵活最难得。怎么才能适度呢？这需要疯狂实践 + 不断的反思 + 持续的重构 + 悟…

栅格搭好了页面框架，接下来很重要的一件事情就是往里面添加内容模块。让内容模块规范化，让页面制作工业化，对大型站点来说，这是栅格系统最有商业价值的地方。下一篇也是本系列最后一篇将展示栅格系统中的模块化应用。

2009-07-15 更新：栅格的模块化应用和栅格关系不大，主要是模块的设计和应用，因此不打算继续此系列，这篇是最后一篇。