干货 | 设计师应该懂的栅格，新人一看就懂哦
之前看过许多文章教程，觉得都没有很详细地阐述栅格到底是个什么东西。本文将详细解释栅格，新手或基础差的童鞋可以过来看一下～
栅 格
话不多说，我们直接进入正题。本文将从以下几个方面来阐述栅格：
什么是栅格
栅格的作用
栅格使用的原理
何时使用栅格
在哪使用栅格
怎么用栅格（举例：在sketch中设置）
总结
什么是栅格
栅格 (Grid) ，（英文发音：狗 ri 的？？？）由一系列规律的小网格组成的网格系统，网格构成页面的最小单位。网格最早起源于平面设计，成因是文字变多后，若排列不整齐会影响阅读，所以就需要参考线，在英文里面是基线，中文里面就是：格子。比如小学常用的方格本这种：
而在UI中常说的栅格，最容易联想到的应该就是：栅格系统。那么何为“栅格系统”？
Ant Design 的解释：基于行（row）和列（col）来定义信息区块的外部框架，以保证页面的每个区域能够稳健地排布。
我们可以这么简单理解：运用固定的格子，遵循一定的规则，进行页面的布局设计。
在Material Design中，栅格由三个元素组成：①columns, ②gutters, ③margins
columns（列）：列是栅格的数量单位，通常设定栅格数量说的就是列的数量，比如12栅格就有12个列、24栅格就有24个列。内容放置在包含列的屏幕区域中。
gutters（水槽）：列间距。槽的数值越大，页面留白越多，视觉效果越松散；反之，页面越紧凑。
margins（边距）：内容和屏幕左右边缘之间的距离。
值得注意的是：栅格常关注的是纵向的间距。
栅格系统中的最小单位就是界面的网格单位基础。如下图：每一格的大小其实就是最小文字的尺寸，这应根据具体情况确定。内部设计元素、板式都是按照这个基础单位建立和布局的，定义了最小单位之后，后续内容元素和布局规则都是基于它整数倍数递增。
通常，在界面设计中经常以8作为最小单位，也就是“8像素原则”。那为什么是8像素，而不是2、4、6、10、12？
1.因为现在iOS和安卓物理屏幕尺寸分辨率很多，这时候就用到了“偶数思维”，当我们采用偶数的时候，元素不会因为适配不同屏幕而变得模糊、失真；
2. 8可以缩小一倍到4,4可以缩小一倍到2，像2、4数值太小，会感觉很碎，也不会像6、10、12一样不能被成倍缩小三次，而且10、12数值有过大，不能精准把控细节。
所以现在基本采用以8像素为原则，这样让界面更统一、更规范，同时提高了复用性。
栅格的作用
1.可以保持整体设计的一致性；
2.元素、模块之间有明显的划分，使得内容可读性变高，版面更加有层次感，更规范；
3.减少设计决策时间，降低与开发的沟通成本，提升工作效率。
栅格使用的原理
1.通过 row 在水平方向建立一组 column；
2.内容应当放置于 col 内，并且只有 col 可以作为 row 的直接元素。
何时使用栅格
1.创建或管理大量网页页面时；
2.不同的小组和成员分别设计页面时。
在哪使用栅格
现在普遍运用于平面、网页、移动端设计。
怎么用栅格
我们需要先建立栅格，然后再在栅格上排布具体内容。其中建立栅格主要包括两个步骤：
1.确定屏幕尺寸，确定安全范围
当我们开始做一个项目时，首先应考虑在多大的尺寸范围内做设计，确定栅格区域的宽度。
2.确定关键数据：列的数量、水槽的宽度
划分的列越多，承载的内容越精细。所以我们先判断内容的复杂度：如果内容简单，12列的栅格系统即可；如果信息较繁杂，建议采用24列的栅格系统。其中后台系统：常用24列；网页端：常用12列、24列；移动端：常用6列。
水槽的宽度我们也是自己设定一个定植，如20px、10px等。
知道了以上建立栅格的步骤，以下将以sketch 为例来演示网页中栅格的具体设置方法：
比如：在设计宽为1920的网页时，若准备留两边边距为370，且按12栅格来设定，设置列间距为20。那么此时应该满足等式：12x列宽+11x列间距+2x边距=1920，将列间距（20px）、边距（370px）代入等式，可求得列宽为80px。
在sketch - Layout Settings中，填入对应数值如下：
在建立完栅格后，具体的内容在排布时我们只要注意以下四点即可：
1.左边距和右边距（下图灰色区域）不能放内容；
2.在列（下图粉色的条）里面放置内容或最小的图标、模块；
3.只要内容产生分割，就以列（下图粉色的条）和水槽（白色的条）为参考；
4.模块里（下图黑色方块）的内容元素可以不受栅格限制。
总结
1.栅格由列、水槽（列间距）、边距组成；
2.栅格只关注纵向的间距；
3.列宽、列间距、边距的数值其实都是自定义的。具体工作中应根据具体情况灵活判定；
4.根据栅格排版的时候，要记住：边距不要放内容；模块要贴齐列且占整数列；模块内的内容可以不受栅格限制。
