栅格系统的应用：  

栅格系统在页面排版布局、尺寸设定方面给了设计者直观的参考，它让页面设计变得有规律，从而减少了设计决策成本；栅格化提高了页面布局的一致性跟复用性；避免了设计师与开发者在细节上的反复沟通确认，从而提升了整个设计开发流程的效率，并能帮助开发者实现较为理想的设计还原。

栅格化系统是设计的一个基本原则，能够有规律的排版页面的布局，在CSS的Bootstrap中采用栅格系统能够更好的进行页面布局。栅格系统就是网格，利用建立的网格进行布局排版。在广告排版、海报画册、网站界面等领域都能广泛运用。

根据业务内容分配页面比例，确定盒子宽度

以24栅格系统为例，一个24栅格系统可以根据业务需要被2等分、3等分、4等分、6等分、8等分、12等分，还可以被1：1：1、1：2：1、1：3：2、2：3：3、1：2、1：3、1：5、3：5等不对称分割，具体采用哪种比例的组合需要我们根据自己业务需求来定，我们此处所说的比例实际上就是盒子的宽度。

栅格系统的构成元素：

1.栅格化系统的最小单位（一般是可整除的单位2  4   6   8   10  12  ，5  10  15  20 ）

2.列（ 列是栅格系统纵向排布依据 ）

3.行（  行是栅格系统的横向排布依据，目前大都是瀑布流形式显示内容不固定高度让行数变成未知数  ）

4.水槽（ 水槽就是列和行的分割间距，水槽越大页面布局间距就越大，水槽越小页面就越紧凑。需要强调的是，水槽里不能放置内容。 ）

---

目前主流桌面设备的屏幕分辨率在竖直与水平方向基本都可以被8整除，使用8作为最小原子足够普适。我们选取4、6、8、10、12为栅格的候选原子单位，然后用目前主流屏幕分辨率与其相除，判断各个分辨率在竖直（Y）与水平（X）方向能否被候选原子整除，统计结果如图。

4是整除率最高的一个原子，接下来依次是8、10、6、12。但4作为基本原子实在过于小了，太小的步进单位将导致我们决策成本的增加，因为我们将元素间距增加4px或者减小4px视觉感受到的差异并不明显，这种情况下我们为了找到那个「合适、满意」的间距，就需要反复调试，这就造成了时间上的浪费，尤其对于没有经验的新人，这点会更为突出。但这种调整并不合适，原因是后台管理系统设计重点在于面向用户使用的效率与逻辑，其次才是视觉呈现，使用栅格系统的目的之一也是想减少设计师在「细节」上的纠结，希望设计师站在更全局的角度看待设计，合理安排时间，因此我们舍弃4。在剩下的6、8、10、12四个单位中，8的整除率最高（80%），以8像素作为一个步进单位的变化，我们视觉上也是能感受到较为明显的差异，因此选取整除率最高的8做为栅格系统的原子单位。 栅格系统对于元素间距设定的帮助是直观的，当我们定义了栅格原子单位为8时，这意味页面上各元素间距的变化也应遵循8n 的规律，一致的变化规律让页面富有节奏感跟韵律感，在提高页面一致性的同时也减少了设计决策成本。我们知道，栅格系统中水槽与栏目的变化也遵循8n 的变化规律，此处 n 为大于0的正整数，即 n=1、2、3……但是用于规范元素间距的8n，n 可以是0.5、1.5这类包含二分之一8的情况，原因是实际工作中，我们面临的情况是复杂的，这样处理可以让间距的设定适应一些特殊的场景，从而使其更灵活普适。

栅格化工具推荐:

PS自带栅格系统设定：新建参考线版面（重点推荐）

Ps 有个功能叫做「新建参考线版面」，打开这个面板后，在预设这里可以看到 Ps 已经预设了8列、12列、16列、24列的栅格系统，选择对应列数就可以看到页面上参考线的变化。预设中「装订线」的宽度即栅格系统中水槽的宽度。默认均为20px，我们可以根据之前讨论的8的倍数原则，将其手动更改为24。

如果预设的栅格系统无法满足我们工作需要，我们也可以自定义栅格系统，并能将栅格参数保存为预设，这样就可以重复利用自定义的栅格系统了。栅格系统还可以选择将其应用在当前画板或者所有画板，十分方便易用。由于是 Ps 自带的参考线，所以它可以通过快捷键灵活的控制显示或隐藏

跨平台的web端栅格工具

GridGuide 最大优点是可以针对一种栅格系统生成4组不同水槽宽度的栅格化方案，能比较直观的比较不同水槽宽度下各个栅格系统的视觉感受。使用方法：在右上角设置好页面宽度以及栏目数量，页面内就会自动生成可以下载为 png 图片的栅格。

网站地址：http://grid.guide/

利用Ps标注工具Assistor Ps进行栅格系统的建立
AssistorPs    &     BootstrapGrid