1
为什么是4点网格系统
Materials Design 8PX网格
2
4点网格的优势
首先要说明一点，8点网格和4点网格系统都没有对错，如今推荐大家使用4点网格系统，是有一定道理的，下面我们先看看这张图。
从上面可以看出，基于8定义的网格系统，其实存在一些细节的间距是没有的，这样我们在定义一些较小的组件时候是很难满足的。
比如下面这个案例：
左边按钮使用8px网格系统定义的间距24，右边使用4px网格系统定义的20，相对来说，间距节奏感会更好。
可能有人会说，两个看起来差不多，但如果是追求极致的细节感，两个间距相差4px已经是非常大了。
所以如果使用4px网格他的面会更广，也能覆盖8px网格的数值。
3
4点网格系统的应用
使用“4 的增量”来定义页面上元素的大小和间距，简称为 4 点网格系统。任何定义的高度或宽度都应能被 4 整除，包括布局间距、组件与元素间距、组件大小等。
4点网格系统相较之前8网格系统的优势大很多，比如以前只能在8和16选择，那么如果使用4网格可以选择12px的间距。
当然如果能被8整除的也可以被4整除，相对来说4的空间与灵活性会更大。
如果没有使用网格系统去定义UI界面中的板式，就会导致各个设计师之间各自去定义，最终界面呈现出很糟糕的效果。
如何定义4px网格系统？
这个很简单，他和定义8px网格系统思路一样，比如4网格系统，我们可以基于4的增量去定义。
下面看这张图。
4px网格系统