关于栅格系统的 5 个基础概念

在介绍 Ant Design 的栅格体系前，我们先来理解关于栅格系统最基础的5个概念：

• 网格（Grid）

• 栅格总宽度（Container）

• 列和槽（Column&Gutter）

• 边距（Margin）

• 区块（Col-n）

1. 网格 | Grid

网格是构成页面栅格系统的最小单位。

在 Ant Design 的设计体系中，我们用 8 作为网格的最小基数，在保证偶数的思路同时能够匹配多数主流的显示设备，最大程度避免出现半像素的情况。

2. 栅格宽度 | Container

栅格宽度是页面栅格系统的总宽度。

在这里要注意一点，为了方便设计师在日常设计环境中的理解，这里的 Container 可以理解为是设计可见区域的总宽度。

3. 列和槽 | Column&Gutter

列（Column）

列是栅格的数量单位，当界面设定好总宽度后纵向等分成几列，比如 Ant Design 采用的 24 栅格就是有 24 列。

一列中包含了列宽（Column Width）以及槽（Gutter）两部分。

槽（Gutter）

槽是相邻两个列宽之间的间隔，通过设定列的左右内边距（padding）来决定槽的大小，列减去槽的部分为列宽。

槽用来规范页面中内容间的间距，槽的值越大，页面中留白部分的面积越多，视觉效果越松散；反之，页面越紧凑。槽通常设为定值。

4. 边距 | Margin

边距是栅格外边距，与屏宽保持合适的安全距离，让界面左右能保证可读性和美观度。

5. 区块 | Col-n

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

划重点：区块从水槽开始到水槽结束

3 步上手 Ant Design 的栅格系统

• 确定栅格可见区域宽度&安全边距

• 确定列与槽的定值

• 计算公式

1. 确定栅格可见区域宽度&安全边距

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

基于 Ant Design 的画板规范以及 UI 模度的概念，我们在设计中主要有以下两种常用布局宽度：

上下布局

栅格可见区域总宽度（Container）：1152px

安全边距（Margin）：32px

左右布局

栅格可见区域总宽度（Container）：1136px

安全边距（Margin）：24px

2. 确定列与槽的定值

常见的栅格系统通常被划分为 12 栅格或 24 栅格，划分的格子越多，承载的内容越精细。通常，在信息繁杂的中后台系统常用 24 栅格，而一些商业网站、门户网站通常划分成 12 栅格。

我们会给槽设定一个定值，用来确定列宽的大小。在 Ant Design 系统中，我们对 Gutter 数值的设定以 8 为基数，如16px，24px，32px...

💡Tips:

• 槽的数值越大，页面留白间隙越多；

• 槽的区域不可以放置内容，内容区从水槽开始到水槽结束

3. 计算公式

在 Antd Design 的栅格体系中，我们定义栅格可见区域的总宽度为 C（Container)，列数为n。

可得到一个简单的栅格公式:

C（Container)=列（Column）*N-槽（Gutter）

🌰举个例子

以 Antd Design 的标准上下布局栅格为例：

默认的画板为1440px 的屏宽，首先确定内容区宽度为1152px，使用 24 列栅格，槽的定值为 24px

那么可以得出：

1152px（可见区域总宽度）=列*24-24px（1个 Gutter），从而得出列为 49px，列宽为 25px（列-槽）。

附：sketch 栅格工具

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

• 总宽：相当于 Container，是设计可见区域的总宽度。

• 偏置：表示栅格的起始位置。

• 列数：表示栅格的数量。

• 外围间距：取消勾选。与前端沟通时注意说明总宽为设计可见区域的宽度。

• 间距宽度：槽的值，通常是定值。

• 列宽：栅格内单个可放置内容区的宽度。

栅格布局在项目中的实践