网页页面布局带来稳定性和结构性:网格布局

网格可以给网页布局具备稳定的结构，给设计师提供一个建站用的合理模板。

纵观当下一些采用了顶尖设计的大网站，我们会发现他们很有可能运用了一些网格布局。网格可以给网页页面布局带来稳定性和结构性，给设计师提供了一个可在此基础上搭建网站的便利模板。

网格个不意味着你就必须把作品设计的很无趣。一位好的设计师会应用网格布局的基本规则，并知道如何恰当的打破这些规则。

“网格系统是起辅助作用，不是起担保作用。它有许多用途，每个设计师都可以找到一个适合个人风格的运用方式。不过我们先需要学会如何使用网格；网格设计是一门需要大量练习的艺术。”、

——约瑟夫·米勒-布鲁克曼

网格基础知识

先让我们了解一些网格的术语。网格是一种布局划分，它使用横向和纵向引导线将边白（margin），空格和纵列包含进来，从而提供一个内容布局的框架。

网格一般是在出版行业才能看到，不过它也非常适用于网页设计。网格也不是一定是要你把网站搞的像个报纸的布局，但是它确实可以帮你制作出一个可以在此基础上做设计的统一结构。

网格只是一个辅助设计的的工具，而绝不应该成为限制你设计创造性的障碍。

理解并遵循规则

当你开始学习任何特定新技能时，你都应该遵循对应的准则。刚开始学习基础可以确保你能有效的运用这些基本原理。

刚开始网格间的区别不大，你应该按照网格，让所有的设计元素对齐，并放置到位。在你的设计中使用网格可以给你的内容带来结构性。也给你提供了一个起步的地方，但是它绝不应该扼杀你的创造性。

当下有两种创建网格模板的办法。

自己制作一个网格模板

目前有许多不同的理论可以可以帮你设置好你自己的网格，你的选择权无穷无尽，但是最终，你应该改选择一个最适合你手头项目的网格模板来。

你可以将一个空白文档进行分割，创建出偶数或奇数栏来。通常把中缝（栏与栏之间的空白）考虑进你的网格系统会很有帮助的。

你的网格可以很复杂，可以很简单，随你喜欢。你的网格布局越复杂越精巧，网格系统的自由度就越大。而它越简单的话，理解起来就越方便。选择权在你。

下面是几个用PhotoShop参考线（视图>新参考线）创建的网格范例。

下载一个现成的网格模板

现在网络上有许多可以帮助你做网页开发的标准网格模板，它可以帮你省下自己亲自动手所要耗费的时间。

目前最流行的一个网格系统当属960网格系统，这套网格系统由 Nathan Smith制作，你可以选择12栏，16栏或者24栏的网格布局。

这个项目的诞生纯粹是Smith“手痒”，忍不住。

“我发现我过去一年只是因为受到吸引才分享出这套网格布局。如果其他人从中受益，那就在好不过。”Smith这样评论他的960 网格系统。

下载的文件包中包含针对CSS，HTML，Photoshop，Illustrator，Indesign的文件。设计文件包含了若干网格，它对你制作一个结构化的简洁网站非常有帮助。