栅格系统在排版布局中至关重要，去年讲到过 8 PT 网格系统，最近在使用 Bootstrap 的栅格系统，自己设计后再亲自代码实现会让你更近了解栅格如何选择和应用细节，Bootstrap 最初是由就职于 Twitter 的一个设计师和一个工程师创造的，现在已经成为了这个世界上最流行的前端开发框架和开源项目。

Bootstrap V3 被设计为移动设备优先，所以可以直接用来设计 App 的排版。我一直在研究和关注 iOS 相关的设计规范，先推荐 2 款 Grid。

Grid 1 和 2 请在 Sketch 1x 下使用，标注单位为 PT 适合 iPhone 8 和 X 机型，请注意并不适用 Plus，可在设计原生 App 和 Web App 及 H5 页面使用。

Grid 1 适合相对简单和内容较少的布局，请按照以上图示设置，列 Column 为 50 而列中间的间隔为槽 Gutter 为9 屏幕左右两边的留白是偏移 Offset 为 15

Grid 2 适合复杂的排版布局的需要，列 Column 为 19 而列中间的间隔为槽 Gutter 为11 屏幕左右两边的留白是偏移 Offset 为 13
以上两款网格可以帮助你更好的布局，之后会有更多的网格供大家使用，有任何问题可以微信订阅号 Sketch 设计或知识星球 Leo 设计周刊中留言。