Sketch主流网站使用栅格系统操作实例

Sketch主流网站如何使用栅格系统？相信很多设计师跟我一样对栅格系统早有耳闻，却始终捉摸不透该怎么用，但是我们怎么能被这点小困难打倒呢~，Follow me！

1. 电商网站
一起看一下两个主流电商如何使用栅格布局页面，进一步了解栅格系统的使用。

△ 左淘宝、右京东
2. 淘宝布局
下图包含：完整内容展示布局、浏览器缩小时内容展示布局。
淘宝布局分为4列内容：1、2、3、4，在浏览器缩小的情况下，内容3被隐藏。

栅格布局

• 完整内容展示布局：网页总宽度为1200，列数为24，水槽为10；
• 浏览器缩小时内容展示布局：总宽度为990，列数为20，水槽为10。

在浏览器缩小时的栅格布局里，隐藏4列，内容2宽度变窄占10列，其他内容不变。

栅格布局设定后，可以很方便计算出每个模块内容的宽度。

栅格的列数，根据具体内容设定。内容模块较多，建议等分列数多一些，容易布局；如果内容模块较少，等分列数也可以少一些，就像淘宝可以等分成24列，也可以等分成12列。

栅格布局设定为12列，每个模块内容的宽度和上面等分成24列的宽一样。

2. 京东布局
下图包含：完整内容展示布局、浏览器缩小时内容展示布局。
京东布局和淘宝布局一样分为4列内容：1、2、3、4，在浏览器缩小的情况下，内容3被隐藏。

栅格布局

• 完整内容展示布局：网页总宽度为1200，列数为24，水槽为10；
• 浏览器缩小时内容展示布局：总宽度为990，列数为20，水槽为10。

在浏览器缩小时的栅格布局里，隐藏4列，其他内容不变。

京东栅格布局，每个模块内容的宽度如下图。

再来强调一下：栅格的列数，根据具体内容设定。京东网页等分成24列，也可以等分成12列。

栅格布局设定为12列，每个模块内容的宽度和上面等分成24列的宽一样。

以上就是Sketch主流网站使用栅格系统操作实例的全部内容介绍了，关于更多Sketch教程信息，欢迎关注北极熊素材库，给你带来最丰富的素材图片和最有用的教程，更多最新资讯。