栅格系统的应用：
栅格系统在页面排版布局、尺寸设定方面给了设计者直观的参考，它让页面设计变得有规律，从而减少了设计决策成本；栅格化提高了页面布局的一致性跟复用性；避免了设计师与开发者在细节上的反复沟通确认，从而提升了整个设计开发流程的效率，并能帮助开发者实现较为理想的设计还原。
栅格化系统是设计的一个基本原则，能够有规律的排版页面的布局，在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）方向能否被候选原子整除，统计结果如图。
栅格化工具推荐:
PS自带栅格系统设定：新建参考线版面（重点推荐）
Ps 有个功能叫做「新建参考线版面」，打开这个面板后，在预设这里可以看到 Ps 已经预设了8列、12列、16列、24列的栅格系统，选择对应列数就可以看到页面上参考线的变化。预设中「装订线」的宽度即栅格系统中水槽的宽度。默认均为20px，我们可以根据之前讨论的8的倍数原则，将其手动更改为24。
如果预设的栅格系统无法满足我们工作需要，我们也可以自定义栅格系统，并能将栅格参数保存为预设，这样就可以重复利用自定义的栅格系统了。栅格系统还可以选择将其应用在当前画板或者所有画板，十分方便易用。由于是 Ps 自带的参考线，所以它可以通过快捷键灵活的控制显示或隐藏
跨平台的web端栅格工具
GridGuide 最大优点是可以针对一种栅格系统生成4组不同水槽宽度的栅格化方案，能比较直观的比较不同水槽宽度下各个栅格系统的视觉感受。使用方法：在右上角设置好页面宽度以及栏目数量，页面内就会自动生成可以下载为 png 图片的栅格。
利用Ps标注工具Assistor Ps进行栅格系统的建立
AssistorPs & BootstrapGrid
