Sketch web design 之栅格布局

众所周知，现在的响应式Web设计已经普及，所以做Web Design的时候一定要考虑响应式，而响应式设计的基础概念就是栅格布局，以前在PS上做栅格布局还是比较麻烦的，有了Sketch以后，利用自带的栅格功能就能满足需求，下面我们以构建1200px Container的栅格为例。

选择View／Canvas／Layout Settings呼出设置页面

我们来解释一下这些设置分别是什么：

1. Total Width就是Container的值，我们设定为1200px;
2. Offset表示栅格的偏移量，我们只要设定完成以后按Center按钮即可，会自动居中；
3. Number of Columns就是栅格数，我们默认设置为12个；
4. Gutter on outside是非常重要的设置，勾选以后才能跟前端的栅格算法匹配。
5. Gutter Width就是栅格之间的间距，我们设定为30px；
6. Columns Width就是栅格的宽度，我们设定为70px；

综上设置我们可以得到一个Container为1200px，栅格宽度为70px，栅格间距为30px的一个栅格布局，要做栅格布局的时候直接按照比例调整设置即可：

以上就是Sketch web design 之栅格布局的全部内容介绍了，关于更多Sketch教程信息，欢迎关注北极熊素材库，给你带来最丰富的素材图片和最有用的教程，更多最新资讯。