看看当今那些展示顶级设计的最大网站吧。他们很可能使用了某种网格。网格使网页布局具有稳定性和结构，为设计者提供了建立网站的逻辑模板。
网格并不意味着你必须有一个无聊的设计。优秀的设计师会应用基于网格布局的基本规则，但也知道如何正确地打破这些规则。
“电网系统是一种辅助，而不是保证。
它允许许多可能的用途，每个设计师都可以寻找适合他个人风格的解决方案。但你必须学会如何使用网格;这是一门需要练习的艺术。”
- - - - - -约瑟夫Muller-Brockmann
电网基础知识
让我们来谈谈网格术语。网格是用垂直和/或水平的指导方针来划分版面，包括空白、空间和列，以提供组织内容的框架。网格通常在印刷作品中使用，但非常适用于网页设计．
网格并不一定要使网站看起来像报纸的版面，但它确实可以帮助创建一个统一的结构来开始设计。网格只是一个帮助设计的工具，而不是以任何方式伤害设计的东西。
理解并遵守规则
当你开始学习一门特定学科的新技能时，你应该遵循它的指导方针。从一开始就学习基础知识可以确保你能够有效地应用它的原理。从网格开始也没有什么不同;您应该遵循网格，保持所有设计元素对齐并在其位置上。
在你的设计中使用网格有助于为你的内容带来结构，给你一个开始的地方，但绝不应该扼杀创造力。有两种方法可以建立网格模板:
创建您自己的网格
关于设置自己的网格的最佳方法有许多不同的理论，选项也有无穷无尽，但最终，您必须选择最适合您和手头项目的方法。可以用数学方法划分空白文档，创建偶数或奇数列。思考一下通常是有帮助的排水沟-列之间的空间，并将它们集成到您的网格系统中。
您的网格可以非常复杂，也可以非常简单。您的网格布局越复杂、越精细，您在其中拥有的自由度就越大。它越简单，解释的空间就越大。
选择权在你。下面是在Photoshop中使用参考线创建的几个网格示例(查看>新参考线):
下载一个现成的网格模板
有一些标准的网格可供你使用，这将有助于网站开发，并减少创建自己的网站所需的时间。可能最流行的网格之一是960网格系统．该系统由内森·史密斯(Nathan Smith)发起，允许您从12列、16列和24列的网格中进行选择。
这个项目最初是史密斯“挠设计之痒”的一种方式。”“我只是在分享我发现自己在过去一年左右的时间里被吸引的网格尺寸。如果其他人能从中受益，那就更好了，”Smith谈到960网格系统时说。下载包包括CSS, HTML, Photoshop, Illustrator, InDesign等文件。
设计文件包括几个网格，这对建立一个结构化和干净的网站非常有帮助。
打破规则
现在我们已经介绍了网格的基本知识，让我们突破它!网格是一个很好的方式来排列项目，保持你的设计干净，用户友好，和流线型。然而，正如我之前提到的，你不能让网格扼杀你的创造力，让你觉得自己被困在它的边界内。
你可以随意跳出指导方针;为了使网格设计工作，所有的东西都不需要对齐。打破网格的项目使设计感觉更有机和自由流动，而不是基于表格和无聊。查看一些例子960网站在设计上铺设网格，表明网格可以很漂亮，也可以不那么结构化。
基于网格的设计示例
下面是一些展示优秀设计和有组织的、用户友好的界面的例子。有些是严格的网格铺设，而另一些则显示出一些破坏基础网格的迹象。所有这些都强调了一个事实:使用网格并不意味着站点看起来很无聊。
帮助你的栖息地
数码矮胖的人2009
拉斯维加斯开就
安东•派克
闪亮的革命
Kiki和布莉
Arvorecer
西蒙•克里森
在设计中使用网格的有趣工具
这里有一些基于网格的网页布局的实验工具。
网格设计
一个帮助建立网格的有趣工具。
网格系统发电机
正如这个工具的名字所说:它帮助您生成一个网格。
栅格计算器
另一个帮助设置网格的有趣工具。
jQuery砌筑
一个jQuery工具，根据网格垂直和水平排列项目。
监狱
一个网格布局应用程序，可以覆盖任何地方的任何网格。
使用网格教程
- GridControl:一个用于设计开发的网格叠加系统
- 开发支持您的设计的网格
- 网格设计基础知识
- 在你的网页设计中应用神圣的比例
更多的网格资源
- 关于网格系统的神话和误解
- Smashing Magazine基于网格的设计方法
- 基于网格的设计资源
- 基于网格的设计工具箱
- 网格系统
- 由网格设计
网格并不是所有设计问题的解决方案，也不是对所有人都适用。它们确实为需要结构和平衡的坚实、干净的设计提供了一个很好的起点。我希望您喜欢这个网格资源和示例汇编。
尝试在你的设计中实现网格，希望你会看到他们提供的结构可以提供美丽和独特的设计，这也将帮助潜在客户选择你作为他们的网页设计机构！这些类型的设计是好看的和超级专业的，所以他们是伟大的学院网站或其他专业机构!你对网格式网页布局有什么看法?
它们是好是坏?他们在网页设计中的角色是什么?
