基础栅格
基础栅格遵循Semi Design的间距规范，提供4px的最小间距单元。设计师可以使用基础栅格进行微观或局部地区的内容排列。
布局栅格
布局栅格采用主流前端框架普遍使用的列栅格系统。设计师可以使用布局栅格对规划页面整体的内容，功能和信息区块。
- Container 容器：布局栅格的区域/范围(对设计师来说通常是一个Frame)
- Margin 容器内边距：布局栅格与容器的内边距
- Column 列：布局栅格的最小构成单元，每个列的宽度相等
- Gutter 列间距：列与列之间的间隔距离
初始布局栅格
在不同容器下，栅格的具体数值(容器内边距, 列数, 列间距)会因地制宜。Semi Design目前给出四种不同容器下的初始栅格系统，以确保产品在不同尺寸设备上的合理展示。设计师也可根据实际需求进行自定义。
Large - 大尺寸
容器宽度范围在1440px及以上，通常代表大尺寸桌面设备，是平台类产品最常使用的容器。大尺寸容器采用12列，容器内边距为24px，列间距为16px。
对超宽设备下容器的限制
对某些屏幕宽度超长(如21:9超宽显示器) 的设备, 应考虑指定布局栅格最大宽度, 或增加列的数量，以避免布局栅格内容随屏幕宽度无限延伸，导致用户视线失焦。
Medium - 中尺寸
容器宽度范围在1128px及以上，通常代表常规桌面设备(或窗口浏览器)。中尺寸容器采用12列，容器内边距为24px，列间距为8px。
Small - 小尺寸
容器宽度范围在768px及以上，通常代表平板电脑设备。小尺寸容器采用6列，容器内边距为24px，列间距为16px。
Extra-Small - 超小尺寸
容器宽度范围小于768px，通常代表手机设备(移动网页端)。超小尺寸容器采用4列，容器内边距为24px，列间距为16px。
使用布局栅格
页面的空间比例和层次结构都会直接影响用户认知。良好地运用布局栅格，能够让用户愉悦而高效地使用有秩序感的产品。
确认容器
设计师在初步规划产品用户界面时，首先需要考虑页面的整体布局，以便确认布局栅格的容器。例如，若应用是单页基础布局，则应选择整页宽度作为布局栅格容器；而当应用时侧边导航布局时，应选择右侧内容区域作为布局栅格容器。
自定义布局栅格
通常情况下，在设计桌面应用时，建议设计师采用Semi Design提供的初始布局栅格(12列，容器内边距为24px，列间距为16px)。选用12列的原因是因其在相对较小的数字中最容易被整除，保证了设计师切分区块的灵活性，同时又不至于使页面过于琐碎。在特殊情况下，若我们需要设计某些功能繁复的中后台系统，也可以采用16列或24列的自定义布局栅格。
对中后台系统而言，16px的列间距在保证页面空间被高效利用的同时，也可以维持良好的呼吸感，不至于让内容过于紧凑。在特殊情况下，若我们需要设计某些要求更多空间和留白的产品(如门户页)，或是区块严丝合缝的产品(如图片墙)，也可以在Semi Design的间距规范下，自定义列间距和容器内边距。
组织内容
在确认初始布局栅格之后，设计师可以开始在此基础上划分页面内容区块。内容区块应当横跨固定数量的列，由于跨多列的内容区块在视觉上占据更大比重，因此设计师应考虑用更多数量的列来划分承载重要内容的区块。
嵌套布局栅格
在设计某些内部结构复杂且跨多列的内容区块时，设计师可以在该区块容器下嵌套使用布局栅格，以保证内容区块内部的合理布局。
何时嵌套布局栅格
布局栅格通常用来规划页面整体结构。当我们在设计区块或组件时（如下拉菜单或信息卡），根据信息架构按照Semi Design间距规范进行设计即可，无需嵌套布局栅格——除非其功能复杂，需要展示大量信息，且占据较大页面比重。
打破布局栅格
在特定情况下，我们也可以打破布局栅格设置，来组织页面内容。打破布局栅格可以使元素突出，吸引视觉焦点（比如：全站横幅，或是市场运营类内容）；但需要注意对中后台系统而言，过多使用会导致页面凌乱。
布局栅格与响应式设计
布局栅格由于其具备区块划分的规律性，以及使用百分数等分列宽的特点，非常适用于设计响应式布局。目前平台产品大多数服务内部员工，由于其使用的显示设备相对固定，因此我们通常使用1440宽度的容器作为设计基准。若平台产品面向全网用户，我们应充分考虑将设计方案兼容到不同尺寸的设备，以保证使用体验。
平台产品以中后台系统居多，由于其功能和信息展示上的复杂性，通常不适合在未做功能精简的情况下移植到移动设备。初始布局栅格提供了4个宽度基准范围及其对应布局栅格的形态，设计师可根据产品特性(内容审核/BI类数据看板)和面向用户群体(内部员工/全网)来扩展布局栅格在更多宽度范围之间的具体形态。
