我刚开始做界面设计的时候，排版全靠感觉。标题放在这里看着还行，正文往下挪一点，按钮居中对齐，左边的卡片和右边的卡片目测拉到差不多宽的位置，然后只要感觉"挺整齐的"，就算过关了，接下来就是打包设计稿交付研发。

但随之而来的问题开始显现，只要产品经理有新增字段或者内容修改需求，比如说左边的卡片要加一行描述文字，我加上之后，卡片高度就变了，然后就和右边的卡片无法对齐。于是我调整了一下右边的卡片高度，结果它和下面的内容之间的间距又发生变化了。当我调完间距，发现整个页面的元素关系全乱掉了，每个元素的位置都需要重新调整。一个本来只需要改一行文字的需求，最后花了整整一个小时重新排版才完全搞定。

后来我才意识到，不是我的审美出了问题，而是我的排版方法有问题。我把每个元素的位置都当成一个独立的因素去考虑，每个位置确定都是"跟着感觉走"。这种做法在做第一次排版时还能凑合用，但只要页面发生任何调整变化，所有位置都需要打散重来，因为它们之间没有任何规则关联和约束，改动一个局部，就会牵连整个全局。

而今天我们来讲的网格系统，就是专门用来解决这个问题的。

一、网格在做什么事

网格给页面提供了一套定位规则。有了这套规则之后，元素的位置就不再是设计师感官确定的结果，而是从一套规则里面推导出来的。标题放在第一栏到第八栏的位置，侧边栏占第九栏到第十二栏，卡片的宽度是三个栏加两个间距。每个元素的位置都有明确的理论依据。

设计师在排版时，不需要逐个元素去目测它们是否对齐。只要所有元素都按照网格的栏线放置，它们之间的对齐关系就自动成立了。标题的左边缘对齐到第一栏的左边线，正文的左边缘也对齐到同一条线，两者之间的对齐关系就能确定，不需要手动拉辅助线去检查。

对齐之外，网格还让布局可以复用。一个页面的网格定好之后，同一套网格可以用在整个产品的所有页面上。列表页、详情页、设置页，虽然内容不同，但底层的栏数、间距、边距是一致的。设计师在做新页面时，不用从零开始定义布局结构，只需要在已有的网格上安排内容即可。不同页面之间也因此获得了视觉上的一致性，用户在使用页面跳转时，也不会觉得每个页面的排版逻辑不一致。

在团队协作中，网格的价值更加凸显。当一个设计项目由多个设计师共同协作完成时，如果没有网格，每个设计师对"这个元素放在哪里"的判断标准都不相同。同一个产品的不同页面，可能会出现完全不同的间距习惯、不同的栏宽比例、不同的边距处理方式。用户在使用产品时会明显感觉到这种不一致的存在，即使说不出具体是哪里不对，但整体的观感就是"不够统一"。网格作为团队共享的定位规则，把所有设计师的排版行为约束在同一套体系内，避免了各自为战的情况。

对设计师个体而言，网格也在节省决策成本。排版过程中，设计师需要做大量的位置决策，元素放在哪里、占多宽、和旁边的元素隔多远，都需要做设计判断。没有网格系统的支持，每个决策都需要从零开始，设计师需要反复调整才能找到"感觉不错"的位置。有了网格之后，大部分位置决策变成了在固定的栏线上做选择，决策的范围被大幅缩小，设计师可以把精力放在更重要的事情上，比如内容的层级关系、信息的组织方式，以及交互的合理性。

二、四种网格类型

界面设计中常用的网格有四种类型，每种类型的划分方式和适用场景不同，设计师需要根据页面的内容特征来做进一步的选择。我们本文先把四种类型的基本概念和适用范围说清楚，接下来我们会结合多篇文章，逐一讲解不同网格的使用方法。

1. 手稿网格（Manuscript Grid）

手稿网格（Manuscript Grid）是最简单的网格形态。整个页面通常只有一个内容区域，所有内容按顺序排列在这个区域内。手稿网格来自于传统书籍的版面设计，通常一页纸上只有一块文字区域，四周留出边距。在界面设计中，手稿网格适合以连续阅读为主的场景，比如长文章页面、电子书阅读器、帮助文档。这类页面的特点是内容结构大都为线性，用户可以从上往下阅读，不需要横向并排展示多组信息。

手稿网格在界面设计中的使用场景比较有限，因为大多数界面需要同时展示多组信息，单个内容区域无法满足这种需求。所以我们可以把它当做理解网格系统的起点，所有更复杂的网格类型都可以看成是对手稿网格的扩展。

2. 列网格（Column Grid）

列网格（Column Grid）是界面设计中最常用的网格类型。它把页面在纵向上划分成若干等宽的栏，栏和栏之间有固定的间距。设计师在排版时，可以让元素的宽度和位置与这些栏对齐。每个元素都可以占用一个栏，也可以横跨多个栏。

列网格之所以会成为界面设计的主流选择，是因为它可以灵活地支持多种布局。一套 12 栏的网格，可以做两列布局（左边 8 栏，右边 4 栏），也可以做三列布局（每列各占 4 栏），还可以做不等宽的混合布局。

3. 模块网格（Modular Grid）

模块网格在列网格的纵向栏线之外，又加了一组横向的行线。栏和行交叉，把页面切成大小一致的矩形模块，每个模块就是一个独立的内容单元——放一张卡片、一个指标、一张图都行。列网格只解决横向分布，模块网格把纵向对齐也一并接管了。

模块网格适合内容在横向和纵向上都需要对齐的场景。典型的例子是数据看板（多个指标卡片排成行列）、商品列表（每个商品卡片大小一致、上下左右对齐）和图片墙（图片按网格排列）。当页面上只有一两行并排内容时，列网格就够了。当内容在纵向上也需要结构化排列时，模块网格才是首选。

4. 层级网格（Hierarchical Grid）

层级网格和前三种网格的思路不同。手稿网格、列网格、模块网格都是先定好网格结构，再把内容放进去。层级网格反过来，先看内容的优先级和相互关系，再根据内容来划分区域。优先级高的内容占更大的区域，次要内容占较小的区域，区域的大小和位置不是等分的，而是由信息的主次决定的。

层级网格适合内容天然不适合等分的页面。一个产品落地页，头部可能是一张全宽的大图，中间是两栏的功能介绍，底部是三栏的用户评价，每个区块的布局方式都不同。一个新闻首页，头条需要占据大面积来吸引注意力，其他新闻按重要性递减排列。这类页面如果硬套等分的列网格，要么布局和内容的优先级对不上，要么需要大量的"打破网格"操作。层级网格直接按内容的主次来划分区域，不需要先等分再打破。

五、网格会不会让设计变得死板

初学者在第一次接触网格时，常见的反应是抵触，会发出这样的灵魂拷问：网格把页面切成了固定的格子，所有元素都必须放在格子里，设计的自由度不就被限制了吗？每个页面都按照同样的栏数和间距排列，做出来的东西不都长一样吗？

这个担心可以理解，但它是对网格作用的误读。网格约束的是元素的定位规则，不是元素的内容和表达方式。设计师在网格内部仍然可以自由决定每个区域放什么内容、用什么字号、怎么配色、交互怎么进行。网格控制的是"这个区域在页面上的位置和宽度"，不控制"这个区域里面长什么样"。

用音乐做类比更容易理解。乐谱的节拍是一种约束，每一拍的时长是固定的，演奏者必须按照节拍来演奏。但没有人会认为节拍让音乐变得死板，因为旋律、和声、力度、音色这些决定音乐好不好听的要素，完全不受节拍的限制。节拍的作用是让音乐有了可感知的节奏，听众可以跟着节拍感受旋律的起伏。网格在版式设计中的作用和节拍类似，它提供的是结构层面的秩序，在这个秩序之上，设计师的创意空间并没有被压缩。

事实上，有网格反而比没有网格更自由。没有网格的时候，设计师的大量精力被消耗在最基础的定位问题上。这个元素放在哪里、和旁边的元素隔多远、两个卡片是不是一样宽，这些问题都需要逐一判断。有了网格之后，定位问题被规则解决了，设计师不需要在这些基础问题上反复纠结，可以把注意力集中在更有价值的设计决策上。

还有一个问题经常被提起：什么时候可以打破网格？打破网格的前提是设计师清楚网格正在提供什么秩序，然后有意识地在某个局部偏离这个秩序来达到特定的视觉效果。比如一个元素故意突破栏的边界，横跨到网格之外，制造一种"突出"或"打破常规"的视觉张力。这种打破是有目的的，设计师知道自己偏离了什么、为什么偏离、偏离之后会产生什么效果。

如果设计师自己都不清楚网格的规则是什么，"打破网格"就变成了"没有网格"，结果获得的不是自由，而是混乱。

六、网格的基本术语

接下来的几篇文章，我们会频繁使用一些网格相关的术语，在这里我们先做一个统一说明，以确保读者在后续阅读时，不会因为术语不清而卡住。

栏（Column）是列网格中纵向划分出来的等宽区域。一个 12 栏的网格，就是把内容区域在横向上均匀分成 12 份。栏是元素定位的基本单位，设计师在安排元素的位置和宽度时，以栏为刻度——一个按钮可以占 2 栏宽，一个卡片可以占 4 栏宽，一个内容区域可以占 8 个栏宽。

间距（Gutter）是相邻两个栏之间的空隙。间距控制的是栏与栏之间的分隔程度。间距越大，相邻栏里的内容之间隔得越开，分隔感越强。间距越小，内容之间靠得越近，关联感越强。间距通常是一个固定的数值，整个网格中所有栏之间的间距通常需要保持一致。

边距（Margin）是内容区域到屏幕边缘的距离。边距太小，内容贴着屏幕边缘，视觉上会感到拥挤；边距太大，有效的内容展示区域会被压缩。边距和间距是两个不同的概念，间距是栏与栏之间的，边距是整个内容区域与屏幕边缘之间的。

内容区域（Content Area）是边距以内、所有栏和间距所占据的总区域，宽度等于所有栏宽加上所有间距宽度。页面上的所有设计元素都放在内容区域之内，除非是有意为之的全宽元素，比如通栏背景图。

这四个术语是网格系统最基础的词汇，后续文章讲到列网格的参数选择、模块网格的行列划分、响应式断点的适配策略时，都会以此为基础展开。