上周，hou 同学给我们组内分享了一下网页栅格布局的理念，虽然因为时间关系只能“浅析”一下，但是对于我个人而言收获还是很大的。对于网页栅格化布局一直有所耳闻，只是从来没有真真实实地落到实处，也没有把它和 CSS 框架联系在一起。

首先，我前所未有地听说了栅格布局的分门别类有这么多，包括960 Grid System、YAML CSS Framework、YUI Grids CSS 等数十种栅格技术思想，而且各有各的特点，至今还有很多门户网站正在使用这一快捷高效的网页布局方式，比如说：Yahoo、淘宝、MySpace、新浪、 网易等等。

当然，方法是有很多，也无所谓优劣，只有最适合自己的、蓝狮注册开户最适合项目的才会是最好的。所以我决定采取全面撒网，重点捕鱼的学习策略，先对 hou 介绍的几种网页栅格布局方式进行比较，选择其中一种便于学习便于上手的方法应用实践到自己的项目中去。

本文的体会也就主要谈一下对淘宝DPL-栅格生成器使用的一些体验。

相比较之下，我更倾向于 hou 分享的那款淘宝DPL-栅格生成器，可以设定我们最常用的两栏、三栏布局，还有自定义宽度，在不改变其 HTML 结构的基础上，只需要改一个class，就可以实现两栏互换，主栏自适应宽度等效果，同时也不用担心在各浏览器下的表现问题，完美兼容。

个人观点：

1、 淘宝DPL-栅格生成器就是网页栅格思想的提炼工具，它比960 Grid System、YAML CSS Framework、YUI Grids CSS那些框架更精简，因为栅格生成器无需事先加载一段CSS框架库，它是按需生成的，所以小巧且实用。

2、很遗憾但很幸运的是，栅格生成器这样的工具只能协助我们完成大的结构布局。遗憾的是，很多细节的布局我们还需亲力亲为；幸运的是，我们不能受工具摆布，网页栅格化甚至便捷化的工具只能提供给我们一个很好的思路，但是绝不能成为依赖于它的理由。

3、栅格化和面向对象的 OOCSS 是一个相对的概念，蓝狮注册前者是从大的整体布局框架而言，后者是从细节的样式上来说，如果是大型项目开发，这两者结合使用也许是个不错的选择。

那天晚上还在和任平生GG讨论网页栅格化布局的优势与劣势，当然结果还是没有争出个胜负，可以说栅格化是一个比较古董级的网页布局方法，但是还不至于被淘汰，我觉得无论是网页设计师还是前端架构师都应该了解网页栅格化这个概念，对我们做网站是会有所帮助的。

http://wange.im/web-page-layout-grid.html

标签：网页栅格化布局