一、网页端栅格系统的必要性

1. 专业

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

2. 高效

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

3. 布局基础

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

二、栅格系统的基础概念

网格（Gird）：栅格系统的最小原子单位

列、水槽（Column、Gutter）

栅格总宽（Container）

边距（Margin）

盒子/区域（Col-n）

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

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

编者注：设计规范官网汇总 →https://www.uisdc.com/design-specification-website

这样做的好处有两方面。

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

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

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

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

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

为什么强烈推荐「8点栅格」→ 《让设计更高效！正式为大家安利这个好用的「8点栅格」》

2. 列+槽（Column+Gutter）

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

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

3. 栅格宽度（Container）

栅格宽度（Container）：页面栅格系统的总宽度。

4. 边距（Margin）

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

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

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

5. 盒子/区域

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

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

三、怎么样建立网页栅格

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

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

2. 确定关键数据：列的数量、水槽的宽度

常见的栅格系统通常被划分为12栅格或24栅格。我们需要根据自己的项目确定栅格的划分数量，划分的格子越多，承载的内容越精细。通常，在信息繁杂的后台系统常用24栅格，而一些商业网站、门户网站通常划分成12栅格。

栅格不是划分的越细越好，24栅格精细，但也容易显得琐碎，内容排布的规则太多，也就相当于没有规则。有的项目根据实际情况也会划分成16栅格、20栅格，也是可以的。

△ 槽的数值越大，页面留白越多

需要注意的是，槽的区域不可以放置内容。通常，我们会给槽设定一个定值，用来确定栏的大小。

计算公式

我们假设内容区宽度为W（Weight），列宽为C（Column），列数为n，槽为定宽G，可以得出：W=C*n。由于槽不可以放置内容，可见内容区为：W=C*n-G。

举例：我们为一个屏宽1440的项目划分栅格，首先确定内容区宽度为1440，24列，槽为定值16；那么可以得出列宽60，栏为48。

内容区应从水槽开始到水槽结束：

附：sketch 栅格工具

目前，很多软件提供自动栅格设置功能，sketch也提供这样的功能：Layout Settings。

Total Width：相当于 Container，是内容区的宽度。

Offset：表示栅格的偏移量，表示栅格从哪里开始。

Number of Columns：表示栅格的数量。

Gutter on outside：记得勾选。勾选以后栅格的设置才是跟前端的栅格算法匹配。

Gutter Width：槽的值，通常是定值，控制页面留白间隙。

Column Width：列的值（栏+槽），也就是栅格单个内容区的宽度。