写在前面：大家好，我是一名UI设计师。为了真正理解栅格系统在设计中的作用和它是如何在前端框架中发挥作用的，我肝了几个晚上的代码，在充分理解了栅格系统在前端框架中的用法之后，写下了这篇文章。文章将站在设计师的角度和前端工程师的角度去理解栅格系统及其具体用法，并分享如何在设计师和前端之前搭建无缝对接的栅格化设计系统，文章中会涉及到前端知识，观看者需要具备一定前端素养，如果你也喜欢，那就接着往下看吧！

一、为什么要使用栅格系统做设计

1、栅格系统帮助设计师实现整齐而又美感的页面

我第一次接触到栅格系统，还是一个刚入行不久的设计小白的时候，那时接到的一个项目是做一个企业官网，网页设计对于许多人来说是一个比较简单的活，我那时也是这么认为的。当我自认为做的很满意拿去给我的组长去审核的时候，被她打回来了，要我修改。可那个时候我始终看不明白哪里还有问题，要从哪里进行修改。在煎熬过后，我把设计稿拿给我的师兄看，他看过之后就简单的帮我画了几条线，就把我的问题找到并解决了，我当时惊呆了。而他所使用的方法，那时的我还不太懂，只知道能让我的页面变得整齐而有规律，而现在的我能很清楚的知道，那便是栅格系统。

通过简单的几条线就能将我们画面划分的整齐而清晰，这便是栅格系统的魅力所在。其实除了网页设计，还有我们的移动端界面、WEB后台界面、平面画册设计等诸多的领域都能看到栅格系统的身影，深刻理解并使用栅格系统去做设计，对我们设计的提升有着重要的意义。

2、栅格系统在设计师和开发者之间建立了沟通的桥梁

前面有讲到栅格系统能帮助我们更好的去做设计，帮助我们创建规律而整齐的页面，这是我前期对栅格系统的理解。后来，接触到B端系统设计之后，我对栅格系统又有了新的认识。它是设计师和前端工程师沟通的桥梁，是二者的共同语言。那么，它是如何在设计所和前端工程师之间建立这种联系的呢？其实之前一直不理解，甚至只是为了纯粹的使用栅格系统进行设计。那其实前端工程师在设计响应式布局的页面的时候，会严格遵守我们的栅格布局，至于前端如何实现，我将在下面的内容进行分享。

栅格系统在页面排版布局、尺寸设定方面给了设计者直观的参考，它让页面设计变得有规律，从而减少了设计决策成本；栅格化提高了页面布局的一致性跟复用性；避免了设计师与开发者在细节上的反复沟通确认，从而提升了整个设计开发流程的效率，并能帮助开发者实现较为理想的设计还原。

图1-1 利用栅格系统搭建后台管理系统示例（图片作者：Coderthemes）

二、栅格系统与响应式

1、什么是响应式设计

响应式设计是指根据不同机型和屏幕，我们的设计稿的不同展现形式。一般的，对于大型的科技公司，为了在多终端设备的显示无缝对接，都会采用响应式的设计方案，例如苹果和谷歌。响应式给出了同一设计稿在不同设备尺寸上的解决方案，使得无论是在手机端还是pc端或是ipad端都有最佳的视觉展现。所以，往往在做这样的设计的时候，设计师就不得不把屏幕尺寸这一要素考虑在内，而不仅仅是针对当前的设计稿尺寸，因为那样往往是不全面的。

2、为何要用栅格系统来做响应式设计

首先，我们要来理解，为何要在前端框架中采用响应式布局，其一，响应式设计能最大限度的满足屏幕利用率；其二，也能最大化满足用户的操作效率。响应式可以响应的前提有两点：页面布局具有规律性；元素宽高可用百分比代替固定数值，而这两点正切合了栅格系统的特性。所以，利用栅格系统来做响应式设计，就会让设计变得更加快捷高效。

3、利用栅格系统完成后台系统布局设计

对于一个有着一定经验的B端设计师而言，拿到项目的第一时间，在对需求进行分析之后，不是着急着去确定它的风格，也不是着急去确立它的规范，而是先确立它的框架。首先，你得明白你的项目在何处使用，将面对什么样的用户群体，以此确定你将使用的框架。

确定设计稿的尺寸是你第一步要做的事情。在现有的显示设备中，1920*1080的浏览器占据了主流，其次是1366*768和1440*900，因此我们常常会采用1920*1080的设计尺寸，其实也是没有什么问题的。但是我们经常忽视屏幕分辨率带给设计的影响，往往开发实现的效果和我们设计稿的效果相差甚远，这也不能完全把锅摔给我们的开发同学，设计和开发的沟通是尤为重要的。在做响应式设计的时候，采用居中的尺寸进行设计就能避免这种因为不同尺寸导致的页面不一致的问题，比如采用1440*900的设计稿时，向上能适配1920的尺寸，向下也能适配1366的尺寸或是更小的尺寸，这样的设计尺寸会带来更小的误差。

接下来就是确定结构了，在后台系统中，前端所采用的框架一般为Elements或是ant design，那我们在设计的时候只要选取其中的框架给到开发，开发也能能快的实现出来。下面是几种常见的系统布局：

图2-1 几种常见的后台系统布局（图片来源：Ant design）

确定好结构之后，我们就可以在相应的布局上对可变区域建立栅格系统，对于详细的栅格系统建立方法，将在下节内容进行讲解。

最后，当我们完成以上的步骤之后，还有最重要的一步往往会被我们忽视，那就是响应策略。简单点说就是我们的页面在什么样的尺寸下进行什么样的变化。这一点，我们的前端框架中设定了一套对于的响应策略，基于谷歌的设计规范，给出了xs、sm、md、lg、xl五种状态，每种状态下对于的横屏尺寸分别为小于768px、大于等于768px、大于等于992px、大于等于1200px、大于等于1920px。当我们浏览器尺寸发生变化的时候，系统会根据实际的尺寸进行相应的变化。

三、如何建立与前端无缝对接的栅格系统

在建立栅格系统之前，我们先了解栅格系统中几个重要的参数：栏目（Column）跟水槽（Gutter）。栅格系统是由栏目（Column）跟水槽（Gutter）交替分布形成的，栏目（Column）是接纳网页内容的容器，水槽（Gutter）用来调节相邻两个栏目间距，把控页面留白。

下面我们以1440px宽作为后台设计系统尺寸，按照ant design设计规范给出的顶部导航64px，侧边导航256px，剩余的内容区域做栅格系统布局，可自适应调整。如下图所示。

图3-1 中后台常规布局

创建好基础框架，确定我们的栅格区域之后，再找到sketch中的视图-画布-布局设置，对总宽、偏置、列数进行设置，其计算公式为：我们假设内容区宽度为W（Weight），列宽为C（Column），列数为n，槽为定宽G，可以得出：W=C*n。由于槽不可以放置内容，可见内容区为：W=C*n-G。举例：我们为一个屏宽1440的项目划分栅格，首先确定内容区宽度为1440，24列，槽为定值16；那么可以得出列宽60，栏为48。如下图。

最后，参数都设置好了之后，我们的栅格系统就算搭建完成了。那么如何用好我们的栅格系统并在前端中实现，就需要我们理解这里面的参数和前端所对应的参数之间的关系，这一部分我在下一节为大家详细讲解。

四、栅格系统在前端框架中的实现

下面以Elements所提供的Layout布局来讲解栅格系统在前端框架中的运用以及如何实现响应式布局。

1、Layout布局

elements默认采用24分栏，也就是24列的栅格，这也为设计师提供了一个采用24栅格的思路。栅格数也是可以根据设计师所采用的进行修改的，比如12栅格，那么前端只需要将span的默认值24修改为12，这样就和设计所采用的栅格系统保持一致。当然，这里还是建议采用默认的数值，设计师应尽量往前端靠近，减少开发的工作量。

栅格系统通过改变栏目（Column）的宽度实现了宽度的百分比变化。一般地，我们在后台系统常常采用一行1列、2列、3列、4列、6列等常规布局，如下图所示：

图4-1 常见后台栅格布局（图片来源：Elements）

那么这些布局所对应的代码是如何实现这些布局的呢？Elements通过提供的row和col组件来实现布局，并可以通过col组件的span属性来进行自由的布局组合。下面请看源码：

图4-2常见后台栅格布局对应源码（图片来源：Elements）

当span=24的时候，代表这个盒子占据栅格列数为24列，也就是一行只显示一个模块；当span=12的时候，代表一个盒子占据栅格列数为12列，也就是一行可以容纳2个这样的模块；同理，当span分别等于8、6、4的时候，代表盒子占据栅格的列数分别为8列、6列、4列，对应一行分别可以容纳3个、4个和6个模块。

做到这里，我们还只能够实现将一排排布我们希望的个数，只能根据屏幕宽度进行对应的百分比的自适应变化，还不能实现根据不同屏幕自动布局的响应式，那如何实现响应式的呢？

2、响应式布局

Elements中设定了5个响应式尺寸，分别为xs、sm、md、lg、xl，也就是我们之前提到的，相对应的临界值分别为小于768px、大于等于768px、大于等于992px、大于等于1200px、大于等于1920px。当屏幕尺寸处于对应的区间内，那么就对应的响应尺寸生效。比如我们当前浏览器尺寸为1440px，符合大于等于1200px的条件，那么相对应的尺寸为lg，在lg状态下，会给定一个合适的排布比例，比如一排展示4个，此时weight=25%，至于什么状态下展示多少个合适应该是设计师给出的方案，而前端只要令col组件的span=6就能轻松实现。

图4-3响应式布局（图片来源：Elements）

图4-4 row组件参数说明（图片来源：Elements）

图4-5 col组件参数说明（图片来源：Elements）

最终我通过Elements所提供的框架组件，简单搭建了一个后台框架并实现了栅格布局和响应式，效果图如下：

图4-6 响应式布局展示

参考文章：

https://www.uisdc.com/layout-design-of-grid-system

https://www.uisdc.com/responsive-design-2

https://www.uisdc.com/responsive-grids-design

https://www.uisdc.com/grid-system-and-application-in-background-design

https://www.uisdc.com/grid-systems-do-responsive-design

https://element.eleme.cn/#/zh-CN/component/layout

https://ant.design/components/grid-cn/

Powered by Froala Editor