那为什么不选择 4，6 或 10？
注意的是最小单位应由实际工作来决定，没有绝对的最小单位数值。在适用性方面，4、6、8、10 这四个数值都基本可以满足。
当使用 4px 时，页面就会被分割的非常细碎，当 8 不够用的时候，就要使用 4 了。
最小单元格的数值选择需要从两方面考虑：
- 最小单位在具体使用时是否具有一定的灵活性
- 最小单位能否被大多数屏幕的宽度整除，即广泛的适用性
屏幕尺寸和分辨率种类有增无减。使得设计师对 “维护适配性” 的难度越来越大，设计稿导出会有@0.5、@0.75、@1、@1.5、@2、@3 倍多种需求，在 1@倍设计稿，奇数（比如 5px）就会出现半像素偏移。而 6 除以 2 得 3，3 就是奇数了，10 除以 2 的 5，6 和 10 不能被 2 除尽。
使用偶数 8px 可以轻松一致地缩放各种倍数而不失真，大多数流行的屏幕尺寸都可以被 8 整除，足够普适，以 8px 为增量进行缩放可提供大量选项，所以推荐 8px。
列 列间距 大边距
栅格系统由 3 个部分组成：列、列间距、左右大边距。栅格系统是由列和列间距交替分布形成的，列是栅格的数量单位，虚拟的垂直块，用于对齐内容，我们以百分比或固定值定义列宽。竖直方向根据页面内容是可以无限延伸，所以栅格系统在竖直方向的栅格可以不体现出来，设计时只要在水平方向保持规律变化就可以了。
通常设定栅格数量说的就是列的数量，如 12 栅格就有 12 列、24 栅格就有 24 个列。列间距把控页面留白，数值越大，页面留白越多，视觉效果越松散；反之，页面越紧凑，画片分割的越碎。
大边距就是设计内容区以外的空间。我们在设计中一般将大边距宽度定义为固定值，该值决定每个设计的最小呼吸空间，灵活的边距占据了由列，列间距组成的网格后的剩余空间。左右大边距是计算在栅格的总宽之内的，删格系统的宽度就是列、列边距、大边距之和。
也有弹性大边距，会根据不同的屏幕尺寸而变化，就是页面边距可以随着屏幕尺寸的变化而变化。页面边距在移动设备上通常是 12px 到 40px 之间，在平板设备和桌面设备页面边距变化就相对多了。
容器
我们按照页面结构从组件 – 容器 – 区块 – 页面 – 场景进行依次拼装成最终形成产品设计方案。容器集合了下级组件，也可以是多个复杂元素的集合，文字、图片、按钮。如登录区块是由多个标签、输入框、按钮组成。容器是成组的设计元素，形成了独立的内容或功能盒子。区块嵌套容器，由区块组成了页面内容。
栅格规范的是容器间比例，而非具体宽度。容器大小收到栅格系统的限制，栅格系统可以根据需求被 2 等分、3 等分、4 等分、6 等分、12 等分，具体采用哪种比例的组合需要根据需求来定。栅格系统 / 设备分辨率大小在变换的同时会带动区块大小的变化，从而使容器发生变化，如元素尺寸变化，文字换行等。
如下图，共有 32 个容器。对于紧密相关的内容，请考虑组成区块。页面被分割的越碎时，设计中越难把控。
