我们设计网页通常使用栅格来做屏幕的自适应，我们在sketch上设计虽然不支持自适应画板，但是我们一般都是先完成pc端的画板布局。

工具栏

我们需要创建栅格需要通过工具栏的显示组件，如果你没有这个组件需要手动来添加。

显示工具

如果没有的话右键单击工具栏，选择「自定义工具栏」。将百分比缩放组件拖拽到工具栏中，记得把「显示/隐藏布局按钮也拖拽上去」。

自定义工具栏

创建你的画板

sketch预置了非常多的网页画板，选择一个适合的即可。

sketch预置画板

设置你的栅格

栅格

我们选择布局设置。

显示组件菜单

通常来说我们可以按照下面来设置。

布局设置

你需要更改的是

总宽度

pc网页设计的话，总宽度推荐1200px，按照bootcssv3文档我们可以看到。推荐的大桌面显示器宽度就是1200px。

超小屏幕 手机 (<768px) 小屏幕 平板 (≥768px) 中等屏幕 桌面显示器 (≥992px) 大屏幕 大桌面显示器 (≥1200px)
栅格系统行为 总是水平排列 开始是堆叠在一起的，当大于这些阈值时将变为水平排列C
.container 最大宽度 None （自动） 750px 970px 1170px
类前缀 .col-xs- .col-sm- .col-md- .col-lg-
列（column）数 12
最大列（column）宽 自动 ~62px ~81px ~97px
槽（gutter）宽 30px （每列左右均有 15px）
可嵌套 是
偏移（Offsets） 是
列排序 是

偏置

通常来说我们设计网页都是中心对齐的，所以点击居中按钮即可，会按照画板宽度取中间的1200个像素。

居中

列数

通常我们使用的12列，像是阿里那种的24列我们在业务异常复杂时考虑。

间距宽度

如果想要元素松散一些，可以调的大一些。紧凑的话就小一些。

列宽

列宽也可以调整。通常来说间距宽度和列宽填写一个就行了。sketch会自动计算对应的另一个。