本文适合新手设计师以及不知道如何使用 Ant Design 栅格系统的设计者来阅读

全文阅读时长约 10 分钟

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

• 网格（Gird）
• 栅格总宽度（Container）
• 列和槽（Column&Gutter）
• 边距（Margin）
• 区块（Col-n）

1. 网格 | Grid

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

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

（栅格最小单位）

2. 栅格宽度 | Container

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

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

（栅格总宽度）

3. 列和槽 | Column&Gutter

列（Column）

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

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

槽（Gutter）

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

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

（列、列宽以及槽）

4. 边距 | Margin

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

（上下布局的安全边距示例）

5. 区块 | Col-n

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

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

（示例为24栅格中，区块内容占据8、6以及4栅格的布局）

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...

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 yubaibai360@qq.com 举报，一经查实，本站将立刻删除。