认识达内从这里开始

为了让我们的网页设计页面展示效果更加的条理和清晰，一般情况下，网页设计师都会蚕蛹栅格系统来实现这一过程。下面我们就一起来了解一下，关于栅格系统我们都需要掌握哪些使用技巧。

网页端栅格系统的必要性

1.专业

制定一套页面的基础规则，可以保持整体设计的一致性、专业性;避免无效的设计尝试，专注于有意义的设计方向。

2.高效

遵循栅格系统的设计细节，无论是元素、模块或页面，都有规律可循，减少设计决策的时间、减少外部门的沟通损耗，提升工作效率。

3.布局基础

栅格系统的应用，可以作为响应式网页布局的基础。

栅格系统的基础概念

1. 网格(Gird)：栅格系统的小原子单位

2. 列、水槽(Column、Gutter)

3. 栅格总宽(Container)

4. 边距(Margin)

5. 盒子/区域(Col-n)

1. 网格：栅格系统的小原子单位

栅格是由一系列规律的小网格组成的网格系统，网格构成页面的小单位。通常，在网页设计中经常使用8作为栅格的小步进单位，一些知名公司都以8为小单位划分网格，规范页面秩序，比如：Ant Design、Matierial Design等。

这样做的好处是：

偶数思维：以8为基础倍数，元素大小可以被大多数浏览器识别并整除，大程度避免出现半像素的情况。

规律性：所有元素以8像素为步进单位，元素大小、间距有规律可循。

为什么不是6、10或者其他?

1.以8为步进单位，进度合适，既不显得过于琐碎，也不会因为间隔太大而显得内容分散;众多开源代码都以8的倍数作为默认设计大小;已被多次论证，8点栅格甚至已经形成了一套理论。

2.凡事没有绝对，如果做固定结构的网页布局，不考虑响应式网页设计，也可以自行根据实际情况以偶数作为小单位来设计网格。

2. 列+槽(Column+Gutter)

列(Column)：列是栅格的数量单位，通常设定栅格数量说的就是列的数量，比如12栅格就有12个列、24栅格就有24个列。通过设定列的内边距(padding)来定制槽(Gutter)的大小，剩余的部分称为栏。

槽(Gutter)：页面内容的间距，槽的数值越大，页面留白越多，视觉效果越松散;反之，页面越紧凑。槽通常设为定值。

3. 栅格宽度(Container)

页面栅格系统的总宽度。

4. 边距(Margin)

栅格外边距，与屏宽保持一定的安全距离

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

这里需要注意的是：

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

5.盒子/区域

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

【免责声明】本文系本网编辑部分转载，转载目的在于传递更多信息，并不代表本网赞同其观点和对其真实性负责。如涉及作品内容、版权和其它问题，请在30日内与管理员联系，我们会予以更改或删除相关文章，以保证您的权益!