UI设计师的一个基本原则是有效而规律的设计布局，而网格，就是让UI设计师更加规整次序更有规律的存在，即用更加科学的方式去排版，依据版心将整体划分为多个统一尺寸的网格，网格的作用及其广泛，杂志、画册、门户网站都有网格的出现。

一、网格的列与行

“列”是指网格的垂直部分，网页的灵活性与网格中列的数量成正比，但也并非越多越好，一般来说，PC端12列，移动端6列。

行是网格的水平部分，也是横向部分，他们通常在网页设计中被省略。具有行和列的网格称为模块化网格。移动端行间距用的比较少可以忽略，一般在UI设计师中就是横向的间距。

二、定位模块大小

知道了网格的基础概念之后，应该为自己定义一套科学的标准网格系统，在此后的工作中，只需要套用这个骨架系统，用以保证骨架的科学性和设计的连续性。

三、边距和水槽大小

我们都对化学有所了解，在化学体系中，最小的单位是原子，它可以组成分子，分子可以组成更多，在UI设计中也是一样，需要从最小的做起，保证世界里有元素这个基础。

前面说过，先定最小单位，加入我们最小单位是5，总宽是375(sketch1倍设计尺寸)那我们产品内容我希望整个系统设计风格别那么满，留白稍微多点，我们左右边距是10，中间内容和内容之间我也想留10，这里注意，单位一定是前面我们定的5的倍数。

这就是我们定的栅格，系统骨架，设计时候必须保证每个设计元素，在我们框架内，保持规则，边距不要出现内容，水槽也不要放内容，如果放，尽量以组的形式。

必然会出现除不尽的情况，这个避免不了，取整数，必然有个内容区域面积会少1个px，但是这个没有什么关系。

也可以根据不同情况做不同的组合网格，这个具体还是要看是什么的业务场景。