全局控制层为常置的功能底层，是提供稳定性和可预测性、必不可少的层级，具体有顶部导航模块、左侧导航模块等；内容层可分为常置展示层，具体有主内容模块、左右内容模块或上下模块等；临时层为动态出现的功能顶层，始终叠加在基础层及内容层上方，是链接上下体验流程的模块，具体有抽屉模块、弹窗浮层模块。
梳理了相关模块所组合的栅格布局。Web 端有三种基础布局和多种扩展布局。一般来说，栅格区域就是指内容层。前面我们提到了定宽(版心)，版心和内容层还是有差别的，版心 两端页边距=内容区。
那其他模块能用栅格吗？当然可以，有需要就用，不过需要注意使用效率。
3. 确定列数、列间距、大边距首先，创建一个低保真或高保真的原型，设计一些基本元素和交互流程之后，考虑最优的列数。列间距的区域不可以放置内容，我们一般会给列间距设定一个定值来确定列宽大小，这个列间距也是模块间的间距。
栅格数量
常见的栅格系统通常被划分为 12 栅格或 24 栅格。划分的格子越多，承载的内容越精细。也有较少项目会根据实际情况也会划分成 16 栅格、20 栅格，移动设备屏幕尺寸小于 PC 屏幕，想要有更灵活发挥空间，就必须采用列宽较小的栅格。
12 栅格
12 栅格系统在流行的前端开发开源工具库 Bootstrap 与 Foundation 中广泛使用，一些商业网站、门户网站通常划分成 12 栅格，适用于业务信息分组较少，单个容器内信息体积较大的中后台页面设计。根据业务场景可以很容易的将 12 栅格区域划分成 2 等分、3 等分、4 等分、6 等分，以及根据等分容器组合的多种不等分场景，组合也是栅格作为一个界面辅助系统非常方便的原因。
24 栅格
24 栅格系统适用于业务信息量大、信息分组较多、单个容器内信息体积较小，场景复杂的页面设计。相对 12 栅格系统，24 栅格系统变化更加灵活，更适合内容比较多样复杂的场景。我们常见的 B 端 web 设计一般选用 24 栅格，栅格系统大小就是 24 列 23 列间距 2 大边距。
Ant 采用了 24 列、23 列间隔的栅格系统。其中间隔数值是固定的，内容区域减去 23 列间隔后，剩下的部分等分成 24 列。
