UI设计师必学栅格设计原理和技巧

　　3. 栅格宽度(Container)

　　栅格宽度(Container)：页面栅格系统的总宽度。

　　4. 边距(Margin)

　　边距(Margin)：栅格外边距，与屏宽保持一定的安全距离.

　　行：栅格系统的横向网格，与纵向网格的列成垂直状态，列和行交叉的区域形成页面的内容区，由于目前网页多采用瀑布流形式，上下滑动区域变得不受限制，随意性很高，本文忽略这一部分。

　　这里需要注意的是：我们把栅格的列(Column)看做是栏+槽的宽度，12栅格即是指12列。有一些文章对栏和槽的理解是下方左图的样子，而从开发角度来说，下方右图是前端理解的栅格。我们用栅格来制定页面视觉规则，同时也要理解开发怎样实现栅格，才能在工作中减少不必要的沟通误区。

　　5. 盒子/区域

　　建立好基础栅格之后，一块内容通常会占用几个栏和列的宽度，我们把这个区域理解为内容盒子，用于承载一个区域的内容。

　　以上，栅格的基础概念已经清楚了，那怎样着手给自己的项目建立栅格系统呢?

　　三、怎么样建立网页栅格

　　1. 确定屏幕尺寸，确定安全范围

　　当我们开始着手做一个项目时，首先应考虑在多大的尺寸范围内做设计，也就是确定栅格区域的宽度范围。