1. 什么是栅格系统？
通过维持视觉秩序来有效清晰的传递信息。
2. 栅格系统的优势？
减少决策成本，提高设计理解力；
响应化；
加速团队协作设计；
加速开发并保证视觉还原；
3. 栅格系统的基本构成
列（内容的容器）和槽（调节相邻两个列的间距）；
页面边距（内容区域以外的空间）
模块（设计区）
8点网格：栅格系统大的层面可以帮助设计者更好的进行版式设计与内容布局，而小的方面可以辅助设计师规范页面内各种元素的对齐与间距的设定。从用户角度来讲，两者同等重要，从执行层面来讲，我们一般先做版式设计与布局，然后在填充内容、调整细节。
如果设计上没有立即可识别的间距系统时，这种设计可能会让用户感觉廉价、不一致，而且通常不值得信任。如果设计上遵循 8pt 网格系统时，节奏变得可预测和视觉上的愉悦。对于用户来说，这种体验是经过修饰和可预测的，这增加了用户对品牌的信任与喜爱。
基线网格
4. 什么是响应式？
通过设计让内容在不同的平台上体验最大化，确保让用户在任何一个屏幕看到内容的时候，会觉得这些内容就是为了这个平台而设计的，而不是单纯的缩放而来，这才是跨屏设计的真正难点所在。
5. 响应式设计的核心步骤？
确保核心的用户体验：产品通常是用来解决用户面临的特定问题，关键的内容和关键的功能的组合，通常构成了产品的核心用户体验。
敲定你的产品所覆盖的设备类型。
针对不同内容来匹配用户体验：根据不同设备使用的不同场景来匹配用户体验；
优先为最小的屏幕做设计：移动端优先的设计往往能够更好的专注于核心功能，更适合作为产品的起点。当你优先设计最小屏幕所需要的界面的时候，这种局面会强制你从最关键最重要的地方开始设计。
测试设计
6. 为何要利用栅格系统来进行响应式设计？
响应式可以响应的前提有两点：1. 页面布局具有规律性；2. 元素宽高可用百分比代替固定数值，而这两点正是栅格系统本身就具有的典型特点，所以利用栅格系统进行响应式的设计是顺理成章，也比较高效快捷。
7. 如何建立栅格系统？
确定列的数量；定义水槽和边距(目前 ios 和 android 的最小推荐布局边距为16pt)；定义8pt间距系统；