不会栅格系统？拿走这篇零基础使用指南！

前言

在当今多终端、多设备尺寸的支持下，多屏幕设计已成为商业设计中不可缺少的一部分。为了使界面的视觉显示统一性和一致性，并在不同系统和不同尺寸的设备上保持良好的用户体验，格栅系统尤为重要。它可以帮助设计师制定界面布局方案，以网格的形式将多元素/内容连接在一起，实现多平台、多尺寸的适应，大大提高设计美感和工作效率。

一些优秀的产品使用网格来规范界面信息的布局。虽然它只是传统设计方法的一部分，但只要不太麻烦，许多设计布局问题都可以通过网格系统来解决。许多设计师都知道网格的重要性，但由于他们知之甚少，他们在设计中总是无法开始。本文将结合自己的工作经验，系统总结大量浏览过的文章，希望能帮助初级/中级设计师对网格有更深入的了解。

干货的格栅设计更多：

1.格栅的定义和重要性

1. 栅格的来源

网格的概念来源于平面设计中的“网格”，早在 13 法国建筑师世纪 Villard de Honnecourt 创建图表，试图实现“和谐设计”，这是继黄金比例之后第一次将网格与之结合，以产生一个固定比例的页面布局。

在 18 随着报纸、传单等主流印刷品的兴起，设计师需要解决“向不同的人传达不同的信息，自然浏览，防止不同部分争夺读者的注意力”的问题。

20 本世纪初，设计师们发现，使用网格辅助设计和印刷作品可以使排版布局更加清晰，信息传输更加有效，从而演变成平面设计中的一种方法。

20 约瑟夫·米勒·布罗克曼在世纪中期创作了《平面设计中的网格系统》一书，至今对设计界产生了影响。

不难发现，格栅可以作为组织信息的工具，帮助设计师实现一致和谐的信息布局效果，无论是几个世纪的印刷出版物还是今天的互联网产品界面布局。

2. 什么是栅格

网格和网格的英文都是“格格和网格”Grid“它的本质是为布局提供一个基本的设计框架，这也是实现有组织设计的方法之一。它在平面设计中被称为“网格”，而在网页/移动端中更被称为“网格”。

网格是根据平面中的网格开发的，界面中的元素(文本/图像)可以通过一定的规律合理的设置基准线来规范，使每个区域相对独立但相互关联，形成整个界面，最终呈现出清晰易读的信息布局。

3. 为什么要用栅格？

首先，对于用户来说，使用网格可以使内容布局有规律。通过定义空白、对齐、分割等比例关系，不仅可以降低用户的认知成本，还可以使信息显示更加清晰，有效提高用户的浏览和接收效率。

其次，对于R&D团队来说，格栅通过统一的标准规范约束设计师，共同产生一致的视觉效果，避免了一人一风格的混乱场面，减少了一些细节的沟通，提高了决策和输出效率。在开发过程中，程序员可以通过有规律的设计规则包装和调用一些组件和模块，不仅可以高度还原设计效果，还可以提高开发效率。

另外，在设计中 Web 接口时，格栅系统的使用可以适应计算机、平板电脑、手机等不同设备的尺寸，合理兼容多端、多系统下的自适应效果。

二、网格系统的组成

网格系统并不像我们想象的那么复杂。它主要由网格、列、水槽、边距、总宽度、容器盒等组成。只要我们知道它们之间的关系和定义，我们就会逐一理解：

1. 网格（Gird）

网格（Gird）由基本单位组成「单元格」构图，又称最小单元格，而网格则由一系列规则的网格组成，一般情况下，我们会使用它 8 作为网格中的最小单位，用于增量。为什么要用？ 8 基本倍数呢？

首先，作为偶数，程序可以在单位转换后进行排除，以避免像素中的小数点；其次，8 当界面中的所有元素都使用时，增量单元既不会显得琐碎，也不会使内容过于分散 8 当它是一个倍数时，它的元素大小和间距是有规律的。作者以前写过一篇文章「间距」感兴趣的伙伴可以去看类文章。

2. 列（Column）

列（Column）指网格的数量，如 12 栅格有 12 个列、24 栅格就是 24 列主要用于对齐内容。布局的呼吸感和节奏感是通过格栅的列数来控制的。列数越多，内容排版越精细。相反，列数越少，内容排版越松散。

3. 水槽（Gutter）

水槽（Gutter）是指列与列之间的间距，通过留白实现界面中信息元素的分割和布局呼吸。水槽的宽度会对设计风格产生一定的影响。水槽越大，空白越多，呼吸感越好。相反，空白越少，内容越紧凑。

4. 边距（Margin）

边距（Margin）指界面内容与屏幕边缘的距离，主要用于控制核心内容的显示边界，因此禁止放置任何内容（部分浮动窗口、返回顶部按钮、右侧吸附边栏除外）。边缘值的大小将直接影响格栅区域的空间，这可以自己理解。

5. 栅格总宽（Container）

栅格总宽（Container）是指所有列加所有水槽，加上两侧边距的总和，即整个格栅系统的总宽度。

6. 容器盒子（Col-n）

容器盒子（Col-n）它是指布局信息的布局区域。通常，设计师在设置基本网格后，会根据实际情况定义一个内容需要占用多个列的宽度并形成一个容器。在后续设计过程中，文本、图片、按钮和其他元素将被限制在有限的容器宽度内，形成一个重用组件，最终组装成一个完整的设计方案。

三、网格系统的制造工艺

1. 网格宽度的设计

在设计 Web 设计师在设置网格区域前，需要根据实际使用场景确定布局，如下：

屏幕宽度不等于网格宽度。在大多数情况下，我们将基于它 1920、1440 这两个尺寸来定义设计稿的宽度，但真正放置信息内容的区域不是设计稿的尺寸，需要适应多平台、多尺寸显示器，通常定义网格宽度 1024px~1400px 例如：常见的 1024px、1200px、1280px、1400px 等等，如果网格宽度超过大多数主流显示器，可以满足绝大多数主流显示器 1400px，在许多笔记本电脑上浏览页面时，左右滚动条会出现，体验非常不友好。

2. 选择网格列数

① 12 栅格

12 列网格非常常见。一些商业网站和门户网站使用较少的业务信息分组 12 网格，它可以被覆盖 2、3、4、6 整理，容易满足信息复杂的等分布场景。此外，不对称布局的容器组合也可以和谐地反映信息，如使用双栏布局 4+8、3+9 使用格栅和三栏布局 2+8+2、3+3+6 格栅等，变化比较灵活。

② 24 栅格

24 列栅适用于信息量大、分组多、复杂多样的使用场景，许多视觉区域较大，需要精细布局 B 端 Web 采用设计 24 栅格，相比 12 网格，区域划分空间较多，布局灵活性较强。

需要注意的是，24 格栅因列数量较多，列宽往往无法准确去除，但差异像素值很小，用户肉眼往往无法察觉，无害。格栅本身的目的是保持视觉效果的协调和统一，而不是敲击某个像素，在特殊情况下可以区别对待。

③ 5 栅格

5 由于设备屏幕的横向空间有限，列栅格一般用于移动设计，因此很少使用，例如：针对“金刚区” 5 图标(一行)、10 标准化排版图标(两行)。如果你想进一步追求后续的灵活性，避免奇数的不便，你也可以 5 格栅格分为 10 列，布局，视觉效果基本可以保持一致。

事实上，在实际设计中，大多数设计师会使用间距来规范界面的排版和布局。 5 格栅将更加灵活、方便。

3. 定义水槽与边距

水槽是列之间的间隔，其定义方法可以延长间距系统的制定标准，以便 8px 推导最小单位，比如 S=8px、M=16px、L=24px、XL=32px、XXL=40px...等等，这样更容易保持视觉一致性，最终使用哪个值没有绝对要求，这也需要根据产品的基调和设计风格来确定，水槽的值越大，页面的空白间隙就越多。

当我们确定内容区的宽度、水槽的宽度和数量时，我们计算列宽(上面提到的不一定是整体除外)，并在中间显示整体，两侧自动形成边距。

四、格栅与响应式的结合

1. 自适应性和响应性

① 自适应

自适应布局是让网页内容根据不同的终端适应布局，设计师需要制定相同的设计草案变更规则，程序员创建多个布局，为不同的终端提供独立的前端代码，系统可以判断当前访问 PC 终端、平板电脑或手机。我们可以做一个测试来调整自适应网页窗口的宽度，发现每个断点都会改变页面元素的位置，呈现出不同的布局效果。需要明确的是，在窗口宽度达到下一个断点之前，元素不会随着窗口的调整而改变。

由于前端需要为每个终端提供独立的代码，固体开发成本较高。在设计中，元素的大小和位置变化不必太复杂，只需保留必要的功能入口。

② 响应式

响应没有那么多的自适应控制。前端只能通过一套代码无缝连接到计算机、平板电脑和手机，可以同时生效多端。其开发成本和设计成本相对较低，适应性较强。最典型的响应布局是，当页面窗口宽度发生变化时，元素的大小随时都会发生变化，特别是图片的膨胀和整行文本的长度。

2. 格栅行为的变化

① 固定栅格

简单地说，当页面宽度在变化过程中没有达到下一个断点时，网格的列和水槽宽度保持不变，页面布局也不会改变。当达到预设断点时，网格的列数会相应地增加或减少，页面右侧的内容也会增加或减少，但元素之间的大小和间距仍然是固定的。

固定格栅的适应规则简单，实现成本相对较低。但由于拉伸过程中边距不固定，其适用范围有限，一般只适用于内容中间、上下结构布局类型的产品。需要注意的是，在太大或太小的屏幕上，比例可能不协调。

② 流动栅格

流动格栅的边缘和水槽宽度是固定的。在达到下一个断点之前，列的数量不会增加。列宽将随页面宽度左右伸缩。变化规则不一定是最小单位（8px）倍数，内容元素也会随页面宽度的变化而变化，以保持页面内容始终充满屏幕的可用空间。

我们可以称移动格栅的视觉呈现为响应性弹性布局，具有高度的兼容性，可以很好地适应多端设备和不同的屏幕分辨率。不同尺寸的卡片混合排也可以平稳过渡，不会显得突然，如图像、视频、类容编辑器、数据可视化等，除了断点变化外，内容元素的缩放不会改变页面的布局。

③ 混和栅格

大多数网站使用移动网格，但一些后台管理系统和工具界面设计将采用混合网格的形式，以使布局具有固定的宽度和移动的宽度。

混合格栅具有很高的灵活性，特别是内容复杂的产品会更友好，可以在不同分辨率的屏幕上达到理想的视觉效果。然而，对于开发来说，规则相对复杂，实现成本较高。

五、一些问题及处理方法

1. 不要在水槽中留下元素

这里说的不是水槽中不能存在的内容，而是不要将单个元素或元素的边缘放置在水槽中，否则会参差不齐，违背格栅的目的。如果你的元素太大，让他穿过格栅，到达下一列的右边。

2. 格栅不一定被拆除

虽然设计师对每个像素的追求都非常执着，但在大多数情况下，格栅是无法消除的，用户无法用肉眼检测到不同的像素。我们需要理解的是，格栅的目的是保持视觉的协调和统一，而不是像素级的准确性。

举个例子，以 1920px 的宽度、12 例如，内容区域的宽度可以是 1000px、1200px、1400px、1600px..，内容区宽度的每一次变化都要重新调整格栅的列宽，即使偶尔也不能每次拆除格栅。

3. 网格区外的内容

网格是为了规范内容，并非所有内容都需要网格。在大多数情况下，我们只需要遵循网格系统的主要内容区域，其他部分，如固定导航、侧悬挂栏和右下角弹出窗口...不一定要随着屏幕大小或内容的变化而变化。

4. 合理打破格栅对齐

对齐在格栅系统中的地位非常重要，但在某些特殊场景中不需要对齐，可以根据实际情况合理打破对齐，而不影响视觉效果。

下图中的照片墙使用非常小的间距将一些不同宽度的照片排列在一起。虽然没有与网格的列宽对齐，但我们很容易将这些照片联想成一个整体，并且可以很容易地单独区分它们，而不会影响整体布局。

5. 子父级模块与父级对齐

在某些场景中，当我们以卡片的形式形成多个内容的信息组时，我们可以忽略子级元素的对齐，父级卡遵循格栅对齐。

六、结语

网格系统可以为设计提供便利，有助于提高设计效率。许多设计师会注意为什么网格很重要，但很容易忽略网格在实际项目中的使用原则，并伴随着一些限制，所以它并不像普通想象的那么简单。

本文提供了网格系统的基本知识，希望能帮助您解决使用过程中遇到的常见问题，使网格能够更好地服务于设计。如有不足之处，欢迎补充。

欢迎关注作者微信微信官方账号:「能量眼球」