它和斐波那契曲线一样，属于设计界七大谜团之一。（不
就是那种让人看了就忍不住发出：“啊~好牛X但是我就是不会用”的感叹的谜一般的存在。
但事实上它并没有那么神秘，读完这篇文章，相信你会对它有一个全新的认识。
关于栅格系统的定义，网上可以找到很多解读。例如，栅格系统还有另一个称呼——网格系统，因此顾名思义， 它是由很多横纵交错的线条所组成的具有一定规律的网格或阵列，主要用来规范版面布局和信息的分布。
（用ps画出的栅格）
它的起源可以追溯到1629年，新登基的法国国王路易十四感到法国的印刷水平不尽人意，因此命令成立一个管理印刷的皇家特别委员会。他们将印刷版面以小格的形式重新编排，将字体设计规范在这一个个的小格当中，形成了最早的栅格系统的雏形。
栅格系统的存在，虽然具有一定的局限性，但是作为一种有理可依的规范，就如同开发设计移动端的时候，附带的一整套设计规范一样，在划定了界限的同时，帮助规避了很多不合理的尝试。
它既可以使信息排布整齐，具有秩序性和逻辑性，又可以更加高效的帮助统一设计规范，减少斟酌的时间；栅格系统虽然最早多应用于平面设计，杂志排版，但是随着时代的发展，它也在互联网领域被推广开来；例如网页设计中，使用网格系统对于前端开发来说无疑更加灵活规范。
栅格系统由这些内容组成：Column（栏）、Gutter（水槽）、Margin（页边距）；
其中，我们若将 内容的总宽度（栏与水槽的总和）用W来表示， 栏用a来表示，栏的数量是n， 水槽用i来表示， 页边距用M来表示，则他们之间的关系可以得到以下计算公式：
1. W=(a+i)*n ——这是有边距网格的情况
2. W=(a+i)*n-i ——这是无边距网格的情况
使用时需注意的是，我们依次确定总宽度W，栅格的数目，然后确定水槽宽度；
当然啦，除了以上计算公式，另外还有一个十分便捷的方式，
一款在线栅格生成神器，动态提供所有符合你需要的栅格方案的预览图，一键解决所有计算问题，使用过的都说好。
当确定好了各个数值，开始绘制参考线的时候，希望你不是和我一开始的时候一样，比着像素一条一条的拖参考线(…)
PS用户打开【视图】-【新建参考线面板】，其中，列的数字就是上文提到的n，装订线对应上文中的i。勾选边距后还可以进行四个方向的调整。
栅格系统在响应式布局的应用
像是现在十分流行的响应式布局，就和栅格系统的关系十分密切。它分为以下几种类型：
1）可切换的固定布局；
2）排列式布局
3）弹性布局
4）混合式布局
5）定制式布局
别慌，在详细了解上述布局方式之前，让我们首先先来了解一下 断点（Breakpoint ）这个概念。
断点——即开发设定好一个固定的值，当屏幕的大小发生变化并达到这个固定的值时，界面布局发生变化。也就是一个决定页面布局是否会发生变化的临界值。
知道了断点的概念后，我们的第一种布局类型，就很好理解了。
是指网格固定，列宽和水槽宽不发生变化，并且当窗口在一定范围内缩放时，布局也不发生任何变化，直到达到某一断点后，界面才会发生改变的一种布局方式。
它的应用可以找到的例子不多，我翻遍了文件夹才找到这么一个。不过，设计达人这个网站做这样的适配，我想主要还是为了可以方便的适配手机端的屏幕大小，因为当我拖动浏览器窗口的时候，它的宽度直到795px左右才发生变化，并且显然看界面是为了适应移动端阅读所做的适配；
2）排列式布局
在这种布局中，内容卡片的尺寸和水槽宽度不变，每行能排下几个就排几个，在拖动浏览器窗口时，排不下的内容即换行显示。
这样的响应式布局，虽然逻辑十分简单，在具有特色的瀑布流式内容网站很常见，但是也有一定的问题，比如整页的卡片宽度是固定的，要想在大屏和小屏之间保证一个大小的平衡需要反复衡量。
3）弹性布局
在这种布局方法中，水槽宽度和页边距是固定的，内容卡片在一定的尺寸范围内弹性伸缩，以保证填满整个屏幕。当然一般不会让一个内容卡片放大到十分夸张的地步，到达断点时即会换行。现在这种布局形式还是蛮常见的，虽然它也有一些缺点，比如我们在拖动浏览器时，会出现卡片时大时小的问题。
4)混合布局
混合布局结合了固定布局和弹性布局的特点，例如下图的后台管理系统；它的侧边栏是固定布局，当浏览器范围缩小时，侧边栏会由原先的图标和文字组合排列的形式，变为仅展示图标的缩略形式；右侧内容则是弹性布局，水槽宽度保持不变，内容卡片在一定范围内进行弹性的变化和换行。
国内的一些视频网站采用了定制式的布局，它不依赖于一套通用的设计规范，而是设计了多种尺寸，来适应不同的应用场景。它结合了弹性布局与可切换固定布局的特点，卡片做伸缩调整，水槽宽度不发生变化，不同大小的浏览器断点采用不同尺寸和列数的布局。
本来以为可以很快写完的，拖拖拉拉的写了一个星期，真不容易。
这些说到底都是一些理论知识，若要结合到实际的运用中去，不仅要灵活思考与自己的项目相适应的方案，还需要多与开发人员沟通，协商一个合理的解决方法。要不然就会出现埋头辛辛苦苦设计了一整套方案后，跟开发一碰头，发现对方提供的实现方式和你想的完全不一样，需要返工重做的情况。（别问我是怎么知道的
（偷偷吐槽一下，站酷的文章编辑功能好难用，这排版…）
公众号：慕氏物语
欢迎来玩。
