Question

人们对CSS网格系统/框架的看法褒贬不一，有人夸赞它，有人咒骂它。为了不收到满怀怨恨的邮件，我声明我保持中立。我能理解一些开发者认为网络系统是多余的，某些情况下还会产生一些冗余代码，但同时我也很欣赏它们在快速搭建界面布局上的价值。

下面是一些对响应式设计提供了不同程度支持的CSS框架：

Semantic （http://semantic.gs）；

Skeleton （http://getskeleton.com）；

Less Framework （http://lessframework.com）；

1140 CSS Grid （http://cssgrid.net）；

Columnal （http://www.columnal.com）。

这些框架中，我个人最喜欢Columnal网格系统，因为它有一套内置的集成了媒体查询的流动网格布局，而且它使用了与960.gs框架类似的CSS命名，960.gs框架是一套广为开发者和设计师所熟知的非常流行的固定宽度网格系统。

Alpha， Omega以及其他常用的网格类名

很多CSS网格系统都使用一些特定的CSS类来完成日常的布局工作。row和container类不言自明，但经常会有很多类需要说明。因此，时常查阅网格系统说明文档中有关这些类的说明，能让我们的工作更加轻松。例如，网格系统中常用的典型CSS类有alpha和omega——分别表示一行中的第一个和最后一个元素（alpha和omega类中会去除内边距或外边距），还有.col_x，其中x指的是该元素横跨合并的列数（如col_6表示横跨6列）。

使用网格系统快速搭建网站

假设我们还没有构建流动布局，也还没有编写任何媒体查询代码。我们手里只有And the winner isn’t...网站首页的PSD分层图，且被要求使用HTML和CSS尽可能快地搭建起网站的基本布局结构。我们来看看Columnal网格系统如何帮助我们快速实现这个目标。在PSD原始设计图中，很容易看出网站是16列布局。但Columnal网格系统最大只支持12列，所以我们将PSD中的16列改为12列。

下载Columnal网格系统的压缩包然后解压，将我们已有的页面复制一份，然后将页面头部的CSS文件链接从main.css改为columnal.css。使用Columnal系统创建页面结构的关键是给div添加正确的class。下面的代码是目前为止页面的完整标签结构：

首先，要将#wrapper div设置为其他所有元素的容器，所以为其追加.container类：

接着往下看，AND THE WINNER ISN'T是页面的第一行文字，所以为头部追加.row类：

网页logo虽然只是文字，嵌在一行里，但横跨12列。因此为其追加.col_12类：

紧接着一行是导航，所以为其追加一个.row类：

然后继续根据需要给元素追加.row和.col_x类。此处我将跳过后续的修改，因为我觉得重复这个过程可能会让你打盹。下面展示的代码就是修改后的完整页面标签。注意，修改中需要将奥斯卡图片挪到单独的一列中。另外还需要给#content和#sidebar外面包裹一层类名为.row的div。

还需要给custom.css文件中追加一些额外的CSS样式，该文件的内容如下：

在这些基本修改完成之后，在浏览器窗口中就能看到页面的基本结构已经搭好，且页面能随着浏览器视口的改变而缩放。

很明显还有很多细节工作要做（我知道，这样说太轻描淡写了），但如果你需要一种快速搭建响应式网站结构的方法，那么Columnal这样的CSS网格系统值得考虑。