栅格是由网格演变而来的另一种说法，都是一个意思——格子，所以不要觉得栅格有多高深复杂，如果把他描述成格子，你还觉得它有多难理解吗？
其实我们都是栅格专家，因为在我们几岁的时候，就已经接触了很多栅格，比如方格本：再比如飞机格：
我个人理解，系统就是规则，例如ios系统，它有它的规则：屏幕尺寸规则，代码语言规则等等，想在它的系统里做app，就需要遵循的它的规则。栅格有了规则，也就形成了我们所说的栅格系统。
一、什么是网格系统？
栅格系统英文为“Grid System ”，也有人翻译为“网格系统”，运用固定的格子设计版面布局，其风格工整简洁。最早出现于印刷，简单的说就是运用固定的格子使界面排列工整简洁。
勒·柯南布塞的《模式》一书最早将网格用于设计的，他将一根矩形以黄金分割法分割出44个设计方案，从而为图形设计提供了一个较款选择余地的样板。后来随着发展，在网页设计中人民也开始运用栅格的方法规划板式。通俗来说，栅格系统就是以规则的网格阵列来来指导和规范网页中的板式布局以及信息分布。
后来延续到web设计，其中比较有名的是 960 Grid System，还有 1200px 的栅格系统（1200px网格系统）。
目的也无非让网页布局的更合理、易于阅读等。
科普一下960px网格系统（http://960.gs/） , 也称 960栅格布局, 数年来作为网页设计人员的最爱, 被用来搭建网站和设计网页布局。
该无疑是非常好的网格系统, 因为相当灵活. 它帮助网页设计者快速地构造以下栏栅数目的布局原型: 9 x 3, 3 x 3 x 3, 4 x 4 x 4 x 4, 10 x 2 等. 960 网格系统可能是现在最受欢迎的网格系统, 并已经在很多网站和设计模板上使用。
使用网格系统，让你的设计具有正式感和规范感，还具有一种结构分明的设计感。这让你设计起来更轻松，对于开发者来说，同样如此。（让设计师清楚的跟其他人解释他们是如何设计的）
1、使用网格系统的好处
超级灵活的排版系统。好处很多——设计、开发、管理网站都用得到。
网格系统的好处之一是，允许按比例设计，可以组织不同元素之间的平衡感。网格系统一般都很灵活，这样就可以在需要时自由调整。
不同的人有不同的习惯，有人喜欢12列的网格，有人则喜欢16列网格，还有人喜欢24列的网格等等等等。
2、网格系统的缺点
首先，很多人，尤其是对于新手来说——网格系统会阻碍他们的发挥创造。
你会感觉你的灵感被束缚在这些条条框框里面了。如果出现这种状况，我建议你从网格系统中跳出来，用自己的创意去设计，按照自己的经验来排布元素，然后再切出网格系统，想出一个二者结合的两全其美的办法，稍做调整，如果网格系统和你的原创设计出入过大，不能有效协调，那么建议换一个网格系统，或者自己设计一个。
其次，网格系统用起来比较困难，有一定的学习成本，需要有一定的数学基础，你得懂比例，会计算。
对于那些数学不好的人来说，网格系统真的是太复杂了。但是我认为，刚开始虽然比较难以上手，但是习惯之后，你会得心应手，设计也将会更加出彩。
二、栅格系统需要知道的六要素
栅格系统的计算方法：
我通过研究sketch软件的一些栅格设置选项来反推栅格系统包含的内容，得到栅格系统基础六要素，大纲如下:
- 栅格的最小单位
- 屏幕总宽度
- 列数
- 列宽
- 水槽
- 安全边距
1. 栅格的最小单位
最小单位是需要优先定好的，因为后面的所有规则都基于它来制定。
下图就是在sketch设置栅格大小的页面：
如果你用sketch却不知道上面这个界面是哪里调出来了，请出门左拐去百度一下！
这里再简单介绍一下：pc端常用最小单位是10，移动端常用最小单位是3、4、5，不过这些也不是固定的，还是那句话，能解决工作上的实际问题就是正确的。
2. 屏幕总宽度
做界面设计会先依附于一个尺寸，由于内容的多少是不确定的，所以高度我们没有办法定死，但内容区的宽度是可以定的，sketch给我们的默认屏幕宽度是960，网页设计中最受欢迎的一个尺寸：
3. 列数
简单来说就是整个界面纵向被分为几栏，sketch默认帮我们分为12列，这是网页端的常用分法，移动端一般是6等分。
4. 列宽
当960宽度的界面被纵向12等分后，我们可以轻易的计算出每一份的宽度是80，而这80的宽度其实又包含两个内容，一个是列宽，一个是水槽，如下图：
每一条灰色区域都是我们所说的一条列宽，sketch的默认列宽是60：
5. 水槽（间隔）
灰色区域是列宽，所以红色区域自然就是水槽（间隔）了。
毕竟界面内容之间是需要间隔的，不可能都堆在一起，所以水槽的作用就是将内容更规范的区分开来。
6. 安全边距
做app界面的时候，我们都会设置一个屏幕安全边距，因为当信息帖在屏幕边上的时候，不仅会影响可读性，也会影响美观度。网页端同样也会有一个安全边距，它是如何来的呢？
还是这张图：
我们看上图，屏幕的最右侧是一个水槽，说明右侧是有安全边距的（一个水槽的宽度），而屏幕左边没有空隙，那我们是不是可以将最右侧的水槽分成两份，拿一份放置最左侧？如下图：
当然是可以的，因为sketch已经帮我们做好了这个设置选项，如下图
至于栅格的颜色、形式也可以自己调整，设置选项里都有。
以上就是栅格系统的基本认知及基础六要素，只有透彻的理解了这些基础概念，才有可能将栅格系统更好的运用起来。
举例验证
最后我们通过上面的讲解，验证一下你是否真的有理解这几个要素，比如现在我们要制定一个宽度为1920的网页栅格系统。
如果你用常用的12分栏，得到每一等分的宽度就是1920处12等于160，160包括列宽和水槽，我们就可以定列宽为120，水槽为40（列宽：水槽=3：1）。
安全边距是水槽的一半，就是20。
这样一个1920的栅格系统就基本出来了。是不是很简单。
大家一定要活学活用，很多数值都不是定死的，比如12分栏实在除不尽，那就16分栏；再比如列宽和水槽一定要3：1吗？也不一定，所以千万不要一根筋哦！
三、三种设计中的网页栅格系统
栅格系统的三种形式：
1、 有边距的栅格：
当我们用已知想做的宽度的时候，可以用这种栅格
假设W=1200,i=30(10的倍数),n=12
W=(a+i)*n
1200=(a+30)*12
a=70
例如1、<人人都是产品经理>采用这种栅格，（所有内容皆在版心1200px内，图片内容块是A的倍数，多数内容间距30px，根据内容灵活应用栅格）
2、无边距的栅格
假设W=1200,i=10(10的倍数),n=12
W=(a+i)*n-i
1200+10=(a+10)*12
a约等于90
所以W=(90+10)*12-10=1190
所以这种等分方式是最接近1200屏幕需求
例如：淘宝，天猫，京东
W=(90+10)*12-10=1190
1180版心：
W=1180,i=20(10的倍数),n=12，a=80
W=(80+20)*12-20=1180
例如：UI中国
3、直接等分的栅格
简单明了，直接根据站点内容分几块
例如1：站酷
所有内容都在版心1083px内。以10px倍数为间距，每个模块250px。
例如2：echo回声
所有内容都在版心1000px内。以15px的倍数为间距。
四、栅格化布局如何做到响应式
实际上，web必须呈现任何浏览器的宽度。例如，有一个大显示器，它可以看到1600像素宽的东西，实际上pc端的网页设计是1200px宽，平板电脑上是768px宽，手机是360px宽。所以你会看到一个小于1200px的设计，有大量的留白。但是当你的浏览器再小一个像素，1199px，会发生什么呢？
1. 固定网格
如果开发那边写了一个固定栅格，当你从桌面缩小到平板电脑，就像是在900px的浏览器宽度时，你不会看到任何变化，设计就像是被剪掉了一样。
但当达到768px临界点时，设计马上就会改变，平板电脑上的显示效果就会好起来。如果继续减小这个值，同样的事情也会发生，在到达另一个临界值之前，设计看起来都是不变的。
2. 网格
流动网格的示例
现在来看看流动网格的特点，当窗口缩小时，内容将动态的发生变化，文本会进行换行，元素也会变窄。然而，这些元素在内容宽度缩小到下一个临界值之前，布局是不会变化的。
所以我想说的是，设计的临界值只是一个更改布局的参考点。这就是为什么列宽和水槽在网格中不会改变的原因，因为我们想让设计师在考虑布局时能够更容易地创建一致性。
3. 混合网格
在实际项目中，使用流动网格和固定网格的组合也是常见的做法。网站通常是流动网格，因为它要去适应各种不同终端的大小。
五、各软件中使用栅格系统
打破栅格的设计并不容易实现，因为控制不好常常会让整个设计陷入混乱。
如何在加入奇思妙想的同时还不会破坏整个项目？多练习总是没有错的。
1、PS中使用
PS中参考线，使用网格系统，让你的设计具有正式感和规范感，还具有一种结构分明的设计感。这让你设计起来更轻松，对于开发者来说，同样如此。
2、InDesign中的网格系统
网格系统起源于传统的印刷设计，在印刷介质中，网格系统的辅助作用很强，为印刷而做的网格系统也十分简单。通常在InDesign中就可以完成。不过也可以在AI中建立网格开始设计。在InDesign中新建文档的时候会跳出一个对话框，对话框里有十分丰富的选项哟。
像往常一样新建一个ID文件，但是要改变其中几个关键的设置，就可以建立一个多列的网格。默认的单位是像素，也可以改成英寸、厘米或者其他会让你感觉更舒服的单位，你可以根据你的喜好改变InDesign的度量单位。
在初始的设置菜单中，改变列数就会让网格系统的布局发生改变。有些设计师很喜欢5列网格，有些设计师则有不同的看法。“Gutter”即每列之间的留白空间，应该尽可能地多留，但是也不能留太多，根据内容来调节。
页边距是内容周围的留白空间，我想大家都不希望印刷出来的成品文字都被裁掉吧？所以记得留出足够的页边距。
3、Illustrator中的网格系统
在Illustrator中，创建网格的过程有一点小小的不同。不是在创建文件的时候来创建网格，而是在创建新的文件之后，选择文字工具，然后创建一个文本框，这种方法独特的地方在于你要先确定页边距，然后再把文本框放进精心设置的网格系统中。
然后在顶部的菜单中找到“类型”，然后选择“区域类型选项”。这里将会出现一个对话框，这个对话框和之前在InDesign中看到的十分类似，只有几个不同之处，比如可以沿着分栏新建一行之类的功能。
所以，你可以用这个工具做垂直、水平或是混合在一起的网格系统。在这里一样要对于“Gutter”设置保持高度关注。
在AI中，你可以通过预览来检查刚刚创建的网格，这个功能真是超级有用呢！在“选项”菜单中，你可以决定文本框里的文字是水平的还是垂直的，由此产生的设置如下图所示，大家可以感受一下。
4、在Axure RP中使用栅格系统（辅助线）
在 Axure RP 任何一个页面中进行右键，就可以找到。
网格设置：可以对网格的距离，颜色进行设置
创建辅助线：进行辅助线设置
网格的详细设置
创建全局参考线：如果勾选上了，则创建该文件内的所有页面都会辅助线，如果没有勾选上则只创建当前页面有参考线；而且，辅助线的颜色也不一样。
预设了多种辅助线，960px栅格系统、1140PX栅格系统和1200px栅格系统的参考线，也可以自己设定各项值。
总结
在你的设计中使用网格可以让你更有逻辑地进行你的设计工作，并且网格系统可以更好地组织画面中的信息，让重要的元素更加鲜明，让设计稿有更好的结构，带来更好的体验。
设计师的工作说白了是尽可能更有创意地传递信息，网格系统是让信息更具条理的方式之一，但我们不一定非得100%完全遵循网格的分栏进行设计，我们也要适时打破网格系统，这也是创建视觉兴趣点的好方法！
